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
Text in einer Box mit runden Ecken