Vlastnost CSS border-top-right-radius
Příklad
Přidejte zaoblené okraje do pravého horního rohu dvou prvků <div>:
#example1 {
border: 2px solid red;
border-top-right-radius: 25px;
}
#example2 {
border: 2px solid red;
border-top-right-radius: 50px
20px;
}
Další příklady „Vyzkoušejte si to sami“ níže.
Definice a použití
Vlastnost border-top-right-radius
definuje poloměr pravého horního rohu.
Tip: Tato vlastnost vám umožňuje přidat k prvkům zaoblené okraje!
Výchozí hodnota: | 0 |
---|---|
Zděděno: | Ne |
Animovatelné: | Ano. Přečtěte si o tématu Animable |
Verze: | CSS3 |
Syntaxe JavaScriptu: | objekt .style.borderTopRightRadius="25px" |
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která plně podporuje vlastnost.
Čísla následovaná -webkit- nebo -moz- určují první verzi, která pracovala s předponou.
Property | |||||
---|---|---|---|---|---|
border-top-right-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
Syntaxe CSS
border-top-right-radius: length|% [length|%]|initial|inherit;
Poznámka: Pokud nastavíte dvě hodnoty, první je pro horní okraj a druhá pro pravý okraj. Pokud je druhá hodnota vynechána, je zkopírována z první. Pokud je některá délka nula, roh je čtvercový, nikoli zaoblený.
Hodnoty vlastností
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 |
Další příklady
Příklad
Přidejte zaoblené okraje do pravého horního rohu v procentech:
#example1 {
border: 2px solid red;
background: url(paper.gif);
padding: 10px;
border-top-right-radius: 40%;
}
Související stránky
CSS tutoriál: CSS Rounded Corners
Odkaz HTML DOM: vlastnost borderTopRightRadius