border-radius ဂုဏ်သတ္တိ

border-radius ဂုဏ်သတ္တိသည် အနားစွန်းများနှင့် နောက်ခံအတွက် ဝိုင်းစေသော ထောင့်များကို ဖန်တီးပေးသည်။ ဂုဏ်သတ္တိ၏ တန်ဖိုးသည် မည်သည့် အရွယ်အစား ယူနစ်များကိုမဆို ဖြစ်နိုင်သည်။ ပုံသေထားသော တန်ဖိုးမှာ- 0 ဖြစ်သည်။ ၎င်းသည် အောက်ပါဂုဏ်သတ္တိများအတွက် အတိုကောက်ပုံစံဖြစ်သည်- border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

ဝါကျဖွဲ့ပုံ

selector {
	border-radius: value;
}

တန်ဖိုးအရေအတွက်

ဂုဏ်သတ္တိသည် 1, 2, 3 သို့မဟုတ် 4 အရေအတွက်ရှိ တန်ဖိုးများကို လက်ခံနိုင်ပြီး ၎င်းတို့ကို ကြားခံနေရာဖြင့် ခွဲခြားပေးရမည်-

အရေအတွက်	ရှင်းလင်းချက်
`1`	ထောင့်အားလုံးအတွက် တစ်ပြိုင်နက်တည်း။
`2`	ပထမတန်ဖိုးသည် အပေါ်ညာဘက်နှင့် အောက်ဘက်ဝဲထောင့်များအတွက် ဝိုင်းမှုကို သတ်မှတ်ပေးသည်၊ ဒုတိယတန်ဖိုးသည် အပေါ်ဝဲနှင့် အောက်ညာထောင့်များအတွက် ဖြစ်သည်။
`3`	ပထမတန်ဖိုးသည် အပေါ်ဝဲထောင့်အတွက် ဝိုင်းမှုကို သတ်မှတ်ပေးသည်၊ ဒုတိယတန်ဖိုးသည် အပေါ်ညာနှင့် အောက်ဝဲထောင့်များအတွက် တစ်ပြိုင်နက်တည်း သတ်မှတ်ပေးသည်၊ တတိယတန်ဖိုးသည် အောက်ညာထောင့်အတွက် ဖြစ်သည်။
`4`	ပထမတန်ဖိုးသည် အပေါ်ဝဲထောင့်အတွက် ဝိုင်းမှုကို သတ်မှတ်ပေးသည်၊ ဒုတိယတန်ဖိုးသည် အပေါ်ညာထောင့်အတွက် ဖြစ်သည်၊ တတိယတန်ဖိုးသည် အောက်ညာထောင့်အတွက် ဖြစ်သည်၊ စတုတ္ထတန်ဖိုးသည် အောက်ဝဲထောင့်အတွက် ဖြစ်သည်။

ဘဲဥပုံ ဝိုင်းစေခြင်း

ဘယ်ဘက်ခြမ်း (/) ဖြင့် ခွဲထားသော တန်ဖိုးနှစ်ခုသည် ဘဲဥပုံ ဝိုင်းမှုကို သတ်မှတ်ပေးသည်။ ဘယ်ဘက်ခြမ်းမတိုင်မီရှိ တန်ဖိုးသည် အလျားလိုက် ဝိုင်းမှုကို ညွှန်ပြသည်၊ ဘယ်ဘက်ခြမ်းပြီးနောက်ရှိ တန်ဖိုးသည် ဒေါင်လိုက် ဝိုင်းမှုကို ညွှန်ပြသည်-

selector {
	border-radius: horizontal / vertical;
}

ထောင့်များစွာအတွက် ဝိုင်းမှုများ သတ်မှတ်ထားပါက၊ ဘယ်ဘက်ခြမ်းမတိုင်မီတွင် အလျားလိုက် ဝိုင်းမှုအားလုံးကို စာရင်းပြုစုပြီး၊ ဘယ်ဘက်ခြမ်းပြီးနောက်တွင် ဒေါင်လိုက် ဝိုင်းမှုအားလုံးကို စာရင်းပြုစုသည်။

ဥပမာ

ထောင့်အားလုံးအတွက် 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 ဂုဏ်သတ္တိ,
အနားစွန်းအတွက် အတိုကောက်ဂုဏ်သတ္တိဖြစ်သည်