CSS border-top-right-radius Property
Voorbeeld
Voeg afgeronde randen toe aan de rechterbovenhoek van twee <div> elementen:
#example1 {
border: 2px solid red;
border-top-right-radius: 25px;
}
#example2 {
border: 2px solid red;
border-top-right-radius: 50px
20px;
}
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De border-top-right-radius
eigenschap definieert de straal van de rechterbovenhoek.
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.borderTopRightRadius="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-top-right-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
CSS-syntaxis
border-top-right-radius: length|% [length|%]|initial|inherit;
Opmerking: als u twee waarden instelt, is de eerste voor de bovenrand en de tweede voor de rechterrand. 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 top-right corner. Read about length units | |
% | Defines the shape of the top-right 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 rechterbovenhoek in procenten:
#example1 {
border: 2px solid red;
background: url(paper.gif);
padding: 10px;
border-top-right-radius: 40%;
}
Gerelateerde pagina's
CSS-zelfstudie: CSS afgeronde hoeken
HTML DOM-referentie: eigenschap borderTopRightRadius