Vlastnost border-radius CSS
Příklad
Přidejte zaoblené rohy ke dvěma prvkům <div>:
#example1 {
border: 2px solid red;
border-radius: 25px;
}
#example2 {
border: 2px solid red;
border-radius: 50px
20px;
}
Další příklady „Vyzkoušejte si to sami“ níže.
Definice a použití
Vlastnost border-radius
definuje poloměr rohů prvku.
Tip: Tato vlastnost umožňuje přidat k prvkům zaoblené rohy!
Tato vlastnost může mít jednu až čtyři hodnoty. Zde jsou pravidla:
Čtyři hodnoty – border-radius: 15px 50px 30px 5px; (první hodnota platí pro levý horní roh, druhá hodnota platí pro pravý horní roh, třetí hodnota platí pro pravý dolní roh a čtvrtá hodnota platí pro levý dolní roh):
Tři hodnoty – border-radius: 15px 50px 30px; (první hodnota platí pro levý horní roh, druhá hodnota platí pro pravý horní a levý dolní roh a třetí hodnota platí pro pravý dolní roh):
Dvě hodnoty - border-radius: 15px 50px; (první hodnota platí pro levý horní a pravý dolní roh a druhá hodnota platí pro pravý horní a levý dolní roh):
Jedna hodnota - border-radius: 15px; (hodnota platí pro všechny čtyři rohy, které jsou zaobleny stejně:
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.borderRadius="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-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
Syntaxe CSS
border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;
Poznámka: Čtyři hodnoty pro každý poloměr jsou uvedeny v pořadí vlevo nahoře, vpravo nahoře, vpravo dole, vlevo dole. Pokud je vynechán levý dolní, je to stejné jako vpravo nahoře. Pokud je vynecháno pravé dolní, je to stejné jako vlevo nahoře. Pokud je vynechán pravý horní, je to stejné jako vlevo nahoře.
Hodnoty vlastností
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 |
Další příklady
Příklad
Nastavení zaoblených rohů pro prvek s barvou pozadí:
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
Příklad
Nastavení zaoblených rohů pro prvek s okrajem:
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
Příklad
Nastavení zaoblených rohů pro prvek s obrázkem na pozadí:
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
Příklad
Všimněte si také tohoto:
#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; */
Související stránky
CSS tutoriál: CSS Rounded Corners
Odkaz HTML DOM: vlastnost borderRadius