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 ගුණය,
එය මායිම සඳහා කෙටි යෙදුම් ගුණයකි