Свойство 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 та қийматни олиши mumкин, улар бўшлиқ орқали кўрсатилади:

Эллиптик яхлитлаш

Слеш орқали иккита қиймат эллиптик яхлитлашни ўрнатади. Слешдан олдинги қиймат горизонтал яхлитлашни кўрсатади, слешдан кейинги қийматлар эса вертикал яхлитлашни:

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

Результат:

Мисол

Агар яхлитлашни квадрат томонидан катта ўрнатилса, барibir айлана хосил бўлади:

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

Результат:

Шунингдек қаранг