border-radius

Definice a použití

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

Hodnoty vstupů	Popis
délka v pixelech	Kulaté rohy s takovým poloměrem, jak jsou zadané pixely.
procenta	Zakulacení v procentech.
hodnota / hodnota	první 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 hodnoty	Jestliž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:

Firefoxano

Internet Explorerano

Google Chromeano

Safariano

Operaano