Свойство border-radius

Свойството border-radius създава заоблени ъгли за границата и фона. Стойност на свойството са всякакви мерни единици за размери. Стойност по подразбиране: 0. Това е съкращение за свойствата border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Синтаксис

cssселектор {
  border-radius: стойност;
}

Брой стойности

Свойството може да приема 1, 2, 3 или 4 стойности, посочвани чрез интервал:

Елиптично заобляне

Две стойности чрез наклонена черта задават елиптично заобляне. Стойността преди наклонената черта указва хоризонталното заобляне, а стойностите след наклонената черта - вертикалното:

cssселектор {
  border-style: хоризонтално / вертикално;
}

Ако се задават заобляния за няколко ъгъла, то преди наклонената черта се изброяват всички хоризонтални заобляния, а след нея - всички вертикални.

Пример

Задаваме заобляне 10px за всички ъгли:

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

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

Результат:

Пример

Да видим как изглеждат заоблянията за граница под формата на точки:

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

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

Результат:

Пример

Задаваме заобляне от 10px за ъглите на един диагонал, и заобляния от 40px - за ъглите на втория диагонал:

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

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

Результат:

Пример

Задаваме заобляне от 10px за горния ляв ъгъл, заобляне от 30px за долния десен ъгъл, и заобляния от 50px - за ъглите на втория диагонал:

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

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

Результат:

Пример

Задаваме различни заобляния за всеки от ъглите:

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

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

Результат:

Пример

Нека направим елиптично заобляне, като зададем 20px за хоризонталната част на заоблянето, а 40px - за вертикалната:

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

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

Результат:

Пример

А сега задаваме различно елиптично заобляне за всички ъгли поотделно:

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;
}

Результат:

Пример

Ако на квадратен блок се зададе заобляне, равно на половината от страната на квадрата, се получава кръг:

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

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

Результат:

Пример

Ако се зададе заобляне, по-голямо от страната на квадрата, пак се получава кръг:

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

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

Результат:

Пример

Кръг може да се получи и ако се зададе border-radius на 50% (предимството е, че при промяна на размерите на квадрата няма да се налага промяна на заоблянето):

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

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

Результат:

Пример

Ако се зададе border-radius в проценти за правоъгълник, се получава елиптично заобляне. Ако ширината е зададена в 400px, височината в 200px, а border-radius на 10%, това е все едно да е написано 40px/20px:

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

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

Результат:

Пример

Задаваме стойност border-radius на 50% за правоъгълник - получава се елипса:

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

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

Результат:

Пример

Свойството border-radius заобля не само ъглите на границата, но и на фона:

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

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

Результат:

Вижте също