Hier bist Du: Home « Tipps und Tricks « Rahmen mit abgerundeten Ecken

Tipps und Tricks: Rahmen mit abgerundeten Ecken

Ab CSS 3 sollen sie möglich sein: Rahmen mit abgerundeten Ecken.

Gecko-browser wie Netscape, Mozilla und Firefox (mit -moz-prefix) und KHTML-Browser wie Safari und Konqueror (mit -khtml-prefix) können es bereits.

Code-Beispiel für border-radius:

<style type="text/css">
div
{
font-size:12px;font-family:Verdana;
position:absolute;width:100px;height:200px;
background-color:#efefef;
}
.div1
{
border:3px solid #ff0000;
left:10px;top:50px;
-moz-border-radius:30px;
-khtml-border-radius:30px;
}
.div2
{
border:1px solid #aaaaaa;
left:200px;top:50px;
-moz-border-radius:10px;
-khtml-border-radius:30px;
}
</style>
<title>Rahmen mit abgerundeten Ecken</title>
</head>
<body>
<div class="div1">Beispiel 1</div>
<div class="div2">Beispiel 2</div>
Beispiel ansehen

Die folgenden Eigenschaften lassen Netscape ab Version 6, Mozilla und Firefox abgerundete Ecken darstellen:

Die folgenden Eigenschaften lassen Konqueror und Safari abgerundete Ecken darstellen:

Mit einer prozentualen oder einer Längenangabe legt diese Eigenschaft den Radius der Rundung fest. -moz-border-radius oder -khtml-border-radius ist die Kurzform und steht für alle vier Ecken, die anderen vier Eigenschaften jeweils für eine Einzelne.

Den Rahmen legst Du wie gewohnt mit den Rahmeneigenschaften fest und fügst eine der Eigenschaften für die abgerundeten Ecken hinzu. Die Browser, die diese Eigenschaft nicht kennen, ignorieren die Angabe.

Browser

Alle Browser, die das -moz- oder khtml-prefix nicht unterstützen, zeigen normale eckige Rahmen an, deshalb ist der Einsatz kein Problem.

Anmerkung:

Firefox 2 rendert in den Rundungen unschöne Treppeneffekte, das ist in FF3 behoben.