Runde Ecke mit CSS
Dez / 2014
Runde Ecken würden früher oftmals mühseelig mit Hilfe von Grafiken realisiert. Dank CSS3 ist das nun ein Teil der Geschichte.Um einem Element rundum runde Ecke zu verpassen, ist dieser CSS-Code der richtige:
.div {
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
Es sollen nur bestimmte Ecke abgerundet werden? Auch das ist kein Problem:
.div { -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -khtml-border-top-left-radius: 10px; -khtml-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; }