Individuelle Webentwicklung

Nicht immer ist eine Standardsoftware ausreichend um individuelle Anforderungen gerecht zu werden, wir schaffen Lösungen

Informationen
Bild: Individuelle Webentwicklung

Rahmen mit runden Ecken durch CSS

Rahmen mit runden Ecken durch CSS

Ab CSS 3 sollen sie möglich sein: Rahmen mit abgerundeten Ecken. Grundsätzlich ist es möglich, runde Ecken oder runde Ränder mit CSS jedem Block-Element zuzuweisen. Jedoch bedarf es einem Workaround (manche mögen es CSS-Hack nennen) für unseren lieben IE. Hier stelle ich eine Methode vor, runde Ecken oder runde Ränder mit CSS für alle geläufigen Browser ohne Javascript zu erstellen.

Gecko-browser wie Netscape, Mozilla und Firefox (mit -moz-prefix) und KHTML-Browser wie Safari und Konqueror (mit -khtml-prefix) 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;
-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 1</div>

 

Beispiel:

Beispiel

 

Die folgenden Eigenschaften lassen 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

 

Die folgenden Eigenschaften lassen Konqueror und Safari abgerundete Ecken darstellen
-khtml-border-radius
-khtml-border-radius-topleft
-khtml-border-radius-topright
-khtml-border-radius-bottomleft
-khtml-border-radius-bottomright