Хосияти 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;
}

Результат:

Ҳамчунин нигаред