https://www.tilo-lutzke.de/css
CSS

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;
}