Runde Ecken mit CSS3

Ganze Heerscharen von Webdesignern haben sich schon mit dem Problem der Darstellungen runder Ecken beschäftigt, mit border-radius ist es ganz einfach.

Syntax

border-radius: Abrundungsfaktor

Beim Firefox (ältere Versionen) steht -moz-border-radius, bei Google Chrome und Safari -webkit-border-radius.

Browserunterstützung

Firefox	Chrome	Safari	Opera	Internet Explorer
+3.0	+4.0	+3.1	+10.5	+9.0 ???

Beispiel 1

Text in einer Box mit runden Ecken

Diesen runden Ecken lassen sich sehr gut mit dem Schatteneffekt kombinieren.

Quellcode zum Beispiel

.borderradius1{

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

margin:15px auto; 

width:80%; 

color:#FFFFFF; 

background-color:#BB0000; 

height:60px; 

padding-left:15px; 

padding-right:15px; 

padding-top:5px; 

padding-bottom:5px

}

Beispiel 2