Border-radius қасиеті

border-radius қасиеті шекара мен фон үшін дөңгелектенген бұрыштар жасайды. Қасиеттің мәні ретінде кез келген өлшем бірліктері қолданылады. Әдепкі мән: 0. Бұл қасиеттердің қысқартылған түрі: border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Синтаксис

селектор {
	border-radius: мән;
}

Мәндер саны

Қасиет 1, 2, 3 немесе 4 мән қабылдай алады, олар бос орын арқылы көрсетіледі:

Саны	Сипаттама
`1`	Барлық бұрыштар үшін бір мезгілде.
`2`	Бірінші мән жоғарғы оң және төменгі сол бұрыштар үшін дөңгелектенуді белгілейді, екіншісі - жоғарғы сол және төменгі оң бұрыштар үшін.
`3`	Бірінші мән жоғарғы сол бұрыш үшін дөңгелектенуді белгілейді, екіншісі - бір мезгілде жоғарғы оң және төменгі сол бұрыштар үшін, ал үшіншісі - төменгі оң бұрыш үшін.
`4`	Бірінші мән жоғарғы сол бұрыш үшін дөңгелектенуді белгілейді, екіншісі - жоғарғы оң бұрыш үшін, үшіншісі - төменгі оң бұрыш үшін, ал төртіншісі - төменгі сол бұрыш үшін.

Эллиптикалық дөңгелектену

Қиғаш сызық арқылы екі мән эллиптикалық дөңгелектенуді орнатады. Қиғаш сызықтан бұрынғы мән көлденең дөңгелектенуді көрсетеді, ал қиғаш сызықтан кейінгі мән - тігінен дөңгелектенуді:

селектор {
	border-radius: көлденең / тігінен;
}

Егер бірнеше бұрыштар үшін дөңгелектену белгіленсе, онда қиғаш сызықтан бұрын барлық көлденең дөңгелектенулер тізіледі, ал одан кейін - барлық тігінен дөңгелектенулер.

Мысал

Барлық бұрыштар үшін 10px дөңгелектенуді орнатайық:

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

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

Мысал

Нүктелер түріндегі шекара үшін дөңгелектенудің қалай көрінетінін көрейік:

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

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

Мысал

Бір диагональ бұрыштары үшін 10px дөңгелектенуді, ал екінші диагональ бұрыштары үшін 40px дөңгелектенуді орнатайық:

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

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

Мысал

Жоғарғы сол бұрыш үшін 10px дөңгелектенуді, төменгі оң бұрыш үшін 30px дөңгелектенуді, ал екінші диагональ бұрыштары үшін 50px дөңгелектенуді орнатайық:

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

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

Мысал

Әрбір бұрыш үшін әртүрлі дөңгелектенулерді орнатайық:

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

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

Мысал

Эллиптикалық дөңгелектену жасайық, дөңгелектенудің көлденең бөлігі үшін 20px, ал тігінен бөлігі үшін 40px орнатайық:

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

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

Мысал

Енді барлық бұрыштар үшін бөлек әртүрлі эллиптикалық дөңгелектенуді орнатайық:

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

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

Мысал

Егер шаршы блок үшін дөңгелектенуді шаршы қабырғасының жартысына тең етіп орнатсақ, онда шеңбер шығады:

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

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

Мысал

Егер дөңгелектенуді шаршы қабырғасынан үлкен етіп орнатсақ, бәрібір шеңбер шығады:

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

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

Мысал

Шеңберді border-radius-ты 50% етіп орнату арқылы да алуға болады (артықшылығы - шаршы өлшемдері өзгерген кезде дөңгелектенуді өзгертудің қажеті жоқ):

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

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

Мысал

Егер тікбұрыш үшін border-radius-ты пайызбен орнатсақ, онда эллиптикалық дөңгелектену шығады. Егер ені 400px, биіктігі 200px, ал border-radius 10% болса, онда бұл 40px/20px деп жазғанмен бірдей:

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

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

Мысал

Тікбұрыш үшін border-radius қасиетін 50% етіп орнатайық - эллипс шығады:

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

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

Мысал

border-radius қасиеті тек шекара бұрыштарын ғана емес, сонымен қатар фонды да дөңгелектейді:

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

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

Сондай-ақ қараңыз

border қасиеті,
ол шекара үшін қысқартылған қасиет