Vlastnost border-radius

Vlastnost border-radius vytváří zaoblené rohy pro ohraničení a pozadí. Hodnotou vlastnosti jsou libovolné jednotky pro velikosti. Výchozí hodnota: 0. Je zkratkou pro vlastnosti border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Syntaxe

cssselektor {
  border-radius: hodnota;
}

Počet hodnot

Vlastnost může přijímat 1, 2, 3 nebo 4 hodnot, uvedených mezerou:

Eliptické zaoblení

Dvě hodnoty oddělené lomítkem nastavují eliptické zaoblení. Hodnota před lomítkem určuje horizontální zaoblení a hodnoty za lomítkem - vertikální:

cssselektor {
  border-style: horizontální / vertikální;
}

Pokud jsou zadána zaoblení pro více rohů, pak před lomítkem jsou uvedena všechna horizontální zaoblení a za ním - všechna vertikální.

Příklad

Nastavme zaoblení 10px pro všechny rohy:

html<div id="elem"></div>

css#elem {
  border-radius: 10px;
  border: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

Příklad

Podívejme se, jak vypadá zaoblení pro ohraničení v podobě teček:

html<div id="elem"></div>

css#elem {
  border-radius: 10px;
  border: 1px dotted black;
  width: 300px;
  height: 100px;
}

Результат:

Příklad

Nastavme zaoblení na 10px pro rohy jedné diagonály a zaoblení na 40px - pro rohy druhé diagonály:

html<div id="elem"></div>

css#elem {
  border-radius: 10px 40px;
  border: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

Příklad

Nastavme zaoblení na 10px pro horní levý roh, zaoblení na 30px pro dolní pravý roh a zaoblení na 50px - pro rohy druhé diagonály:

html<div id="elem"></div>

css#elem {
  border-radius: 10px 50px 30px;
  border: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

Příklad

Nastavme různá zaoblení pro každý z rohů:

html<div id="elem"></div>

css#elem {
  border-radius: 10px 30px 50px 70px;
  border: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

Příklad

Vytvořme eliptické zaoblení, nastavením 20px pro horizontální část zaoblení a 40px - pro vertikální:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  border-radius: 20px / 40px;
  width: 300px;
  height: 100px;
}

Результат:

Příklad

A nyní nastavme různé eliptické zaoblení pro všechny rohy zvlášť:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  border-radius: 20px 30px 20px 30px / 40px 60px 40px 60px;
  width: 300px;
  height: 100px;
}

Результат:

Příklad

Pokud pro čtvercový blok nastavíme zaoblení, rovné polovině strany čtverce, získáme kruh:

html<div id="elem"></div>

css#elem {
  border-radius: 100px;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}

Результат:

Příklad

Pokud nastavíme zaoblení větší než strana čtverce, stejně získáme kruh:

html<div id="elem"></div>

css#elem {
  border-radius: 200px;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}

Результат:

Příklad

Kruh lze také získat, pokud nastavíme border-radius na 50% (výhoda spočívá v tom, že při změně velikosti čtverce nebude nutné měnit zaoblení):

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  border-radius: 50%;
  width: 200px;
  height: 200px;
}

Результат:

Příklad

Pokud nastavíme border-radius v procentech pro obdélník, získáme eliptické zaoblení. Pokud je šířka nastavena na 400px, výška na 200px a border-radius na 10%, je to stejné, jako kdyby bylo napsáno 40px/20px:

html<div id="elem"></div>

css#elem {
  border-radius: 10%;
  border: 1px solid black;
  width: 400px;
  height: 200px;
}

Результат:

Příklad

Nastavme hodnotu border-radius na 50% pro obdélník - získáme elipsu:

html<div id="elem"></div>

css#elem {
  border-radius: 50%;
  border: 1px solid black;
  width: 400px;
  height: 200px;
}

Результат:

Příklad

Vlastnost border-radius zaobluje nejen rohy ohraničení, ale i pozadí:

html<div id="elem"></div>

css#elem {
  border-radius: 20px;
  width: 300px;
  height: 100px;
  background-color: #e4f1ed;
}

Результат:

Viz také