Tipps und Tricks: Rahmen mit abgerundeten Ecken
Ab CSS 3 sollen sie möglich sein: Rahmen mit abgerundeten Ecken. Netscape, Mozilla und Firefox können es bereits.
,
,
<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;
}
.div2
{
border:1px solid #aaaaaa;
left:200px;top:50px;
-moz-border-radius:10px;
}
</style>
<title>Rahmen mit abgerundeten Ecken</title>
</head>
<body>
<div class="div1">Beispiel 1</div>
<div class="div2">Beispiel 1</div>
Die folgenden Eigenschaften lassen den Netscape ab Version 6, Mozilla und firefox abgerundete Ecken darstellen:
- -moz-border-radius
- -moz-border-radius-topleft
- -moz-border-radius-topright
- -moz-border-radius-bottomleft
- -moz-border-radius-bottomright
Mit einer prozentualen oder eine Längenangabe legt diese Eigenschaften den Radius der Rundung fest. -moz-border-radius ist die Kurzform und steht für alle vier Ecken, die anderen Vier 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, außer Firefox, Mozilla und Netscape, zeigen normale eckige Rahmen an, deshalb ist der Einsatz kein Problem