Својство 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-radius: хоризонтално / вертикално;
}

Ако се задаваат заоблувања за повеќе агли, тогаш пред косата црта се наведуваат сите хоризонтални заоблувања, а после неа - сите вертикални.

Пример

Да поставиме заоблување од 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;
}

Результат:

Погледнете ги и