CSS border-radius eigenschap
Voorbeeld
Voeg afgeronde hoeken toe aan twee <div> elementen:
#example1 {
border: 2px solid red;
border-radius: 25px;
}
#example2 {
border: 2px solid red;
border-radius: 50px
20px;
}
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De border-radius
eigenschap definieert de straal van de hoeken van het element.
Tip: Met deze eigenschap kun je afgeronde hoeken aan elementen toevoegen!
Deze eigenschap 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:
Standaardwaarde: | 0 |
---|---|
geërfd: | Nee |
Animeerbaar: | Ja. Lees over animeren |
Versie: | CSS3 |
JavaScript-syntaxis: | object .style.borderRadius="25px" |
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.
Getallen gevolgd door -webkit- of -moz- specificeren de eerste versie die met een prefix werkte.
Property | |||||
---|---|---|---|---|---|
border-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
CSS-syntaxis
border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;
Opmerking: De vier waarden voor elke straal worden gegeven in de volgorde linksboven, rechtsboven, rechtsonder, linksonder. Als linksonder wordt weggelaten, is dit hetzelfde als rechtsboven. Als rechtsonder wordt weggelaten, is dit hetzelfde als linksboven. Als rechtsboven wordt weggelaten, is dit hetzelfde als linksboven.
Eigendomswaarden
Value | Description | Play it |
---|---|---|
length | Defines the shape of the corners. Default value is 0. Read about length units | |
% | Defines the shape of the corners in % | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Meer voorbeelden
Voorbeeld
Stel afgeronde hoeken in voor een element met een achtergrondkleur:
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
Voorbeeld
Stel afgeronde hoeken in voor een element met een rand:
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
Voorbeeld
Stel afgeronde hoeken in voor een element met een achtergrondafbeelding:
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
Voorbeeld
Let ook op dit:
#example1 {
border-radius: 2em / 5em;
}
/* is equivalent to:
border-top-left-radius: 2em 5em;
border-top-right-radius: 2em 5em;
border-bottom-right-radius: 2em 5em;
border-bottom-left-radius: 2em 5em; */
#example2 {
border-radius: 2em 1em 4em / 0.5em 3em;
}
/* is equivalent to:
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em; */
Gerelateerde pagina's
CSS-zelfstudie: CSS afgeronde hoeken
HTML DOM-referentie: eigenschap borderRadius