Od provozovatele projektu Rychlost.CZ

border-radius

Definice a použití

Border-radius určuje poloměr zakulacení rohů prvků.

Hodnoty vstupůPopis
délka v pixelechKulaté rohy s takovým poloměrem, jak jsou zadané pixely.
procentaZakulacení v procentech.
hodnota / hodnotaprvní hodnota se týká horizontálního dosahu ukousnutí rohu. Druhá hodnota určuje, kam až zasáhne ukousnutí rohu vertikálně. Dají s etak vytvořit mírně zkosené rohy.
Čtyři hodnotyJestliže se zadají čtyři hodnoty, platí postupně pro rohy top-left, top-right, bottom-left a bottom-right. V případě že nějaká hodnota od konce chybí, přebírá kulatost diagonálně protějšího rohu.
Ukázka:

Čtverec o rozměrech 150px s 10px rohy.

CSS
.square {
width: 150px;
height: 150px;
border-radius: 10px;
border: 1px solid #000;
}
Použité vlastnosti: width, height, border-radius, border
HTML
<div class="square"></div>
Použité tagy: <div>

Výsledek:

Ukázka:

Čtverec s rozměry 150px a s horními zakulacenými rohy.

CSS
.square2 {
width: 150px;
height: 150px;
border: 1px solid #000;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
Použité vlastnosti: width, height, border
HTML
<div class="square2"></div>
Použité tagy: <div>

Výsledek:

Ukázka:

Čtverec o rozměrech 150px s dvěmi hodnotami zaoblení rohů.

CSS
.square3 {
width: 150px;
height: 150px;
border: 1px solid #000;
border-radius: 10px / 5px;
}
Použité vlastnosti: width, height, border, border-radius
HTML
<div class="square3"></div>
Použité tagy: <div>

Výsledek:

Podpora webových prohlížečů

Firefoxano
Internet Explorerano
Google Chromeano
Safariano
Operaano