Sifa border-radius

Sifa border-radius huunda pembe zilizozungushwa kwa mpaka na mandharinyuma. Thamani ya sifa ni yoyote vipimo vya ukubwa. Thamani chaguomsingi: 0. Ni ufupi wa sifa border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Syntax

kichagua {
	border-radius: thamani;
}

Idadi ya Thamani

Sifa inaweza kuchukua 1, 2, 3 au 4 thamani, zikipewa kwa nafasi:

Idadi	Maelezo
`1`	Kwa pembe zote wakati mmoja.
`2`	Thamani ya kwanza huweka kuzunguka kwa pembe ya juu kulia na chini kushoto, ya pili - kwa pembe ya juu kushoto na chini kulia.
`3`	Thamani ya kwanza huweka kuzunguka kwa pembe ya juu kushoto, ya pili - wakati mmoja kwa pembe ya juu kulia na chini kushoto, na ya tatu - kwa pembe ya chini kulia.
`4`	Thamani ya kwanza huweka kuzunguka kwa pembe ya juu kushoto, ya pili - kwa pembe ya juu kulia, ya tatu - kwa pembe ya chini kulia, na ya nne - kwa pembe ya chini kushoto.

Kuzunguka Kwa Duaradufu

Thamani mbili kwa kufyatua (/) huweka kuzunguka kwa duaradufu. Thamani kabla ya kufyatua inaonyesha kuzunguka kwa usogeaji, na thamani baada ya kufyatua - kuzunguka kwa wima:

kichagua {
	border-radius: usogeaji / wima;
}

Ikiwa kuzunguka kunawekwa kwa pembe nyingi, basi kabla ya kufyatua zote za usogeaji hutajwa, na baada yake - zote za wima.

Mfano

Tutaweka kuzunguka kwa 10px kwa pembe zote:

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

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

Mfano

Tutaangalia jinsi kuzunguka kwa mpaka wa vitone kinavyoonekana:

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

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

Mfano

Tutaweka kuzunguka kwa 10px kwa pembe za ulinganifu mmoja, na kuzunguka kwa 40px - kwa pembe za ulinganifu wa pili:

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

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

Mfano

Tutaweka kuzunguka kwa 10px kwa pembe ya juu kushoto, kuzunguka kwa 30px kwa pembe ya chini kulia, na kuzunguka kwa 50px kwa pembe za ulinganifu wa pili:

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

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

Mfano

Tutaweka kuzunguka tofauti kwa kila pembe:

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

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

Mfano

Tutafanye kuzunguka kwa duaradufu, tukiweka 20px kwa sehemu ya usogeaji ya kuzunguka, na 40px kwa sehemu ya wima:

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

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

Mfano

Sasa tuweke kuzunguka tofauti kwa duaradufu kwa pembe zote kwa pekee:

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

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

Mfano

Ikiwa kwa kipengele cha mraba kuweka kuzunguka, sawa na nusu ya upande wa mraba, basi itatokea duara:

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

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

Mfano

Ikiwa kuweka kuzunguka, kubwa kuliko upande wa mraba, basi bado itatokea duara:

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

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

Mfano

Duara pia inaweza kupatikana, ikiwa kuweka border-radius kwa 50% (faida ni kwamba wakati wa kubadilisha ukubwa wa mraba haitabidi kubadilisha kuzunguka):

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

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

Mfano

Ikiwa kuweka border-radius kwa asilimia kwa mstatili, basi itatokea kuzunguka kwa duaradufu. Ikiwa upana umepewa kwa 400px, urefu kwa 200px, na border-radius kwa 10%, basi hii ni sawa, kana kwamba ingeliandikwa 40px/20px:

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

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

Mfano

Tutaweka thamani border-radius kwa 50% kwa mstatili - itatokea duaradufu:

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

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

Mfano

Sifa border-radius haizunguki tu pembe za mpaka, bali pia za mandharinyuma:

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

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

Angalia Pia

sifa border,
ambayo ni sifa-ufupi kwa mpaka