CSS Afgeronde hoeken
Met de CSS border-radius eigenschap kun je elk element voorzien van "afgeronde hoeken".CSS Afgeronde hoeken
Met de eigenschapborder-radius kun je afgeronde hoeken maken.
Border-radius eigenschap
Door gebruik te maken van de CSS eigenschapborder-radius kun je de ronding van de hoeken van een element opgeven. De vier hoeken hoeven niet dezelfde ronding te hebben.
 |
Afgeronde hoeken voor een element met een opgegeven achtergrondkleur: |
Afgeronde
Hoeken!
Hoeken!
|
Afgeronde hoeken voor een element met een rand: |
Afgeronde
Hoeken!
Hoeken!
|
Afgeronde hoeken voor een element met een achtergrondafbeelding: |
Afgeronde
Hoeken!
Hoeken!
Voorbeeld:
#ronding1 {
color: white;
font-weight: bold;
text-align: center;
border-radius: 25px;
background: tomato;
padding: 20px;
width: 100px;
height: 75px;
}
#ronding2 {
text-align: center;
font-weight: bold;
border-radius: 25px;
border: 2px solid tomato;
padding: 20px;
width: 100px;
height: 75px;
}
#ronding3 {
text-align: center;
font-weight: bold;
border-radius: 25px;
background: url(images/ronding.jpg);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 100px;
height: 75px;
}
 |
Afgeronde hoeken of rondingen kun je aan alle elementen toevoegen! |
Hoeken apart instellen
Indien nodig kun je met de eigenschapborder-radius ook nog eens per hoek de ronding opgeven. Verder kan je de hoogte en de breedte van elke hoek apart instellen. Deze eigenschap kan één tot vier waarden hebben.
border-radius: 10px 10px 10px 10px;
| De 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. | |
| De vierde waarde is van toepassing op de linkeronderhoek. |
Vier waarden -
border-radius: 15px 50px 30px 5px; (de 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 linkeronderhoek).
Drie waarden -
border-radius: 15px 50px 30px; (de eerste waarde is van toepassing op de linkerbovenhoek, de tweede waarde is van toepassing op de rechterbovenhoek en de linkeronderhoek, en de derde waarde is van toepassing op de rechteronderhoek).
Twee waarden -
border-radius: 15px 50px; (de eerste waarde is van toepassing op de hoeken linksboven en rechtsonder, en de tweede waarde is van toepassing op de hoeken rechtsboven en linksonder).
Eén waarde -
border-radius: 15px; (de opgegeven waarde geldt voor alle vier de hoeken, die gelijk worden afgerond.
Voorbeeld:
#ronding1 {
border-radius: 15px 50px 30px 5px;
background: mediumseagreen;
padding: 20px;
width: 100px;
height: 75px;
}
#ronding2 {
border-radius: 15px 50px 30px;
background: mediumseagreen;
padding: 20px;
width: 100px;
height: 75px;
}
#ronding3 {
border-radius: 15px 50px;
background: mediumseagreen;
padding: 20px;
width: 100px;
height: 75px;
}
#ronding4 {
border-radius: 15px;
background: mediumseagreen;
padding: 20px;
width: 100px;
height: 75px;
}
