border-radius css3

9  4  5  10.5  5

Siden er opdateret 19. 7. 2013

Med egenskaben border-radius kan man lave runde hjørner på en boks. De 4 hjørner kan defineres samlet eller hver for sig. Der er bare det problem, at Internet Explorer før version 9 ikke forstår egenskaben border-radius.

#demo {
height: 50px;
width: 300px;
border: 1px solid #000;
padding: 10px;
border-radius: 15px;
}

vil se sådan ud :

Noget tekst i en boks med runde hjørner.

Det kan give visuelle problemer, hvis man ikke sætter en passende padding på boksen i forhold til den satte radius på hjørnerundingerne.

Man kan også definere de 4 hjørner forskelligt, rækkefølgen vil så være denne: top-left, top-right, bottom-right, bottom-left:

#demo {
height: 50px;
width: 300px;
border: 1px solid #000;
padding: 10px;
border-radius: 5px 13px 20px 40px
}

De 4 hjørner kan også defineres hver for sig, hvis man f.eks. kun vil have runding på et hjørne. De skal så defineres sådan:

Boks med afrundet hjørne øverst til venstre

#demo {
height: 50px;
width: 300px;
border: 1px solid #000;
padding: 10px;
border-top-left-radius: 15px;
}

Noget tekst i en boks med rundt hjørne.

Boks med afrundet hjørne øverst til højre

#demo {
height: 50px;
width: 300px;
border: 1px solid #000;
padding: 10px;
border-top-right-radius: 15px;
}

Noget tekst i en boks med rundt hjørne.

Boks med afrundet hjørne nederst til højtre

#demo {
height: 50px;
width: 300px;
border: 1px solid #000;
padding: 10px;
border-bottom-rightt-radius: 15px;
}

Noget tekst i en boks med rundt hjørne.

Boks med afrundet hjørne nederst til venstre

#demo {
height: 50px;
width: 300px;
border: 1px solid #000;
padding: 10px;
border-bottom-left-radius: 15px;
}

Noget tekst i en boks med rundt hjørne.

Boks med afrundede hjørner defineret i procent

#demo {
height: 50px;
width: 300px;
border: 1px solid #000;
padding: 20px;
border-radius: 50%;
}


Tekst i en boks - afrundede hjørner i procent.

Mulige værdier:

px-størrelse
Sætter radius på rundingen i pixels
em-størrelse
Sætter radius på rundingen i em
%
Sætter radius på rundingen i procent af sidelængden/sidehøjden på boksen
Valid XHTML og CSS / Copyright © Erik Ginnerskov december 2011
Hjemmesideskolen
Du er her: Forsiden - css - egenskaber - border-radius
sidens top
Brugere lige nu: 1
Home Mail