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 :
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:
- border-top-left-radius {10px;}
- border-top-right-radius {10px;}
- border-bottom-right-radius {10px;}
- border-bottom-left-radius {10px;}
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
