Abgerundete Ecken und Schatten mit CSS3

Abgerundet nach Herzenslust

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:

Am Beispiel anschauen: Box mit abgerundeten EckenAnzeigen.

Box mit abgerundeten Ecken

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.

Mitglied werden, Vorteile nutzen!

  • Sie können alles lesen und herunterladen: Beiträge, PDF-Dateien und Zusatzdateien (Checklisten, Vorlagen, Musterbriefe, Excel-Rechner u.v.a.m.)
  • Unsere Autoren beantworten Ihre Fragen

Inhalt

Downloads zu diesem Beitrag

Über die Autorin:

bild117864

Dr. Florence Maurice bietet Dienstleistungen im Webpublishing in Form von Fachtexten und Trainings (auch maßgeschneiderte Inhouse-Schulungen). Außerdem programmiert sie Webseiten. Ihre Themen: HTML, ...

Newsletter abonnieren