CSS border-linksonder-radius Eigenschap
Voorbeeld
Voeg afgeronde randen toe aan de linkerbenedenhoek van twee <div>-elementen:
#example1 {
border: 2px solid red;
border-bottom-left-radius: 25px;
}
#example2 {
border: 2px solid red;
border-bottom-left-radius: 50px
20px;
}
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De border-bottom-left-radius
eigenschap definieert de straal van de linkerbenedenhoek.
Tip: Met deze eigenschap kun je afgeronde randen aan elementen toevoegen!
Standaardwaarde: | 0 |
---|---|
geërfd: | Nee |
Animeerbaar: | Ja. Lees over animeren |
Versie: | CSS3 |
JavaScript-syntaxis: | object .style.borderBottomLeftRadius="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-bottom-left-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
CSS-syntaxis
border-bottom-left-radius: length|% [length|%]|initial|inherit;
Opmerking: als u twee waarden instelt, is de eerste voor de onderrand en de tweede voor de linkerrand. Als de tweede waarde wordt weggelaten, wordt deze gekopieerd van de eerste. Als een van beide lengtes nul is, is de hoek vierkant, niet afgerond.
Eigendomswaarden
Value | Description | Play it |
---|---|---|
length | Defines the shape of the bottom-left corner. Default value is 0. Read about length units | |
% | Defines the shape of the bottom-left corner 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
Voeg afgeronde randen toe aan de linkerbenedenhoek in procenten:
#example1 {
border: 2px solid red;
background: url(paper.gif);
padding: 10px;
border-bottom-left-radius: 40%;
}
Gerelateerde pagina's
CSS-zelfstudie: CSS afgeronde hoeken
HTML DOM-referentie: eigenschap borderBottomLeftRadius