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

Результат:

Ошондой эле караңыз