CSS afgeronde hoeken
CSS afgeronde hoeken
Met de CSS border-radius-eigenschap kun je elk element "afgeronde hoeken" geven.
CSS border-radius eigenschap
De CSS
border-radius-eigenschap definieert de straal van de hoeken van een element.
Tip: Met deze eigenschap kun je afgeronde hoeken aan elementen toevoegen!
Hier zijn drie voorbeelden:
1. Afgeronde hoeken voor een element met een gespecificeerde achtergrondkleur:
Afgeronde hoeken!
2. Afgeronde hoeken voor een element met een rand:
Afgeronde hoeken!
3. Afgeronde hoeken voor een element met een achtergrondafbeelding:
Afgeronde hoeken!
Hier is de code:
Voorbeeld
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat:
repeat;
padding: 20px;
width:
200px;
height: 150px;
}
Tip: De border-radiuseigenschap is eigenlijk een steno-eigenschap voor de
eigenschappen border-top-left-radius, border-top-right-radius, border-bottom-right-radius
en border-bottom-left-radius.
CSS border-radius - Specificeer elke hoek
De border-radiuseigenschap kan één tot vier waarden hebben. Hier zijn de regels:
Vier waarden - grensradius: 15px 50px 30px 5px; (eerste waarde is van toepassing op de linkerbovenhoek, de tweede waarde is van toepassing op de rechterbovenhoek, de derde waarde is van toepassing op de rechteronderhoek en de vierde waarde is van toepassing op de linkerbenedenhoek):
Drie waarden - grensradius: 15px 50px 30px; (eerste waarde is van toepassing op de linkerbovenhoek, de tweede waarde is van toepassing op de rechterboven- en linkerbenedenhoek en de derde waarde is van toepassing op de rechterbenedenhoek):
Twee waarden - grensradius: 15px 50px; (de eerste waarde is van toepassing op de linkerboven- en rechterbenedenhoek en de tweede waarde is van toepassing op de rechterboven- en linkerbenedenhoek):
Eén waarde - grensradius: 15px; (de waarde geldt voor alle vier de hoeken, die gelijk zijn afgerond:
Hier is de code:
Voorbeeld
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners4 {
border-radius: 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
U kunt ook elliptische hoeken maken:
Voorbeeld
#rcorners1 {
border-radius: 50px / 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px / 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
Eigenschappen voor afgeronde hoeken in CSS
| Property | Description |
|---|---|
| border-radius | A shorthand property for setting all the four border-*-*-radius properties |
| border-top-left-radius | Defines the shape of the border of the top-left corner |
| border-top-right-radius | Defines the shape of the border of the top-right corner |
| border-bottom-right-radius | Defines the shape of the border of the bottom-right corner |
| border-bottom-left-radius | Defines the shape of the border of the bottom-left corner |