Abgerundete Ecken und Schatten mit CSS3

Abgerundet nach Herzenslust: border-radius - das Grundprinzip

Bisher noch keine Bewertungen für diesen Artikel.

border-radius - das Grundprinzip

Nehmen wir für die Box, die abgerundete Ecken erhalten soll, den folgenden HTML-Quellcode:

<div id="abgerundet">Weniger eckig</div>

Per CSS erhält die Box Ausmaße und eine Hintergrundfarbe

#abgerundet {
  background-color: red;
  width: 10em;
  padding: 1em 0.5em;
  text-align: center;
}

Zu diesen Formatierungen werden die Angaben für die abgerundeten Ecken ergänzt:

#abgerundet {
  background-color: red;
  width: 10em;
  padding: 1em 0.5em;
  text-align: center;
  -moz-border-radius: 0.5em;
  -webkit-border-radius: 0.5em;
  border-radius: 0.5em;
}

Beispiel:

Box mit abgerundeten Ecken

Am Beispiel anschauen: Box mit abgerundeten EckenAnzeigen.

72538_borderradius1-png

Und hier noch einmal der gesamte Code. Im Beispiel wird übrigens der Doctype von HTML5 verwendet, aber mit HTML 4.01 oder XHTML 1.0 würde es prinzipiell genauso funktionieren.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Abgerundete Ecken</title>
<style>
body {
  font-family: sans-serif;
  font-size: 150%;
}
#abgerundet {
  background-color: red;
  width: 10em;
  padding: 1em 0.5em;
  text-align: center;
  -moz-border-radius: 0.5em;
  -webkit-border-radius: 0.5em;
  border-radius: 0.5em;
}
</style>
</head>
<body>
<div id="abgerundet">Weniger eckig</div>
</body>
</html>

Die Eigenschaft border-radius dient dazu, den Grad der Abrundung der Ecke zu bestimmen. Je höher der Wert, desto runder die Ecke.

Radius

border-radius bestimmt eigentlich den Radius eines Kreises, den Sie sich über die Ecke gezeichnet vorstellen können.

border-radius im Beispiel oben ist die offizielle CSS3-Eigenschaft. Sie wird von Internet Explorer ab 9, Opera, Safari, Chrome und Firefox 4 unterstützt. Firefox vor Version 4 versteht hingegen nur die Eigenschaft -moz-border-radius. Entsprechend ist die Eigenschaft -webkit-border-radius für ältere Chrome oder Safari vorgesehen.

Präfix voraus

Diese sogenannten herstellerspezifischen Präfixe - im Beispiel -moz- oder -webkit- werden Ihnen bei CSS3 häufiger begegnen.

Browser implementieren CSS3-Eigenschaft oft erst probeweise und mit ihrem Präfix. Wenn die Eigenschaft dann stabiler ist, implementieren Browserhersteller die offizielle Eigenschaft.

Neben -moz- für Firefox und andere Geckobasierte Browser und -webkit- für Safari, Chrome und Co. gibt es auch -ms- für den Internet Explorer oder -o- für den Opera. Bei border-radius brauchen Sie die beiden letztgenannten aber nicht.