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

border-style ဂုဏ်သတ္တိသည် နယ်နမိတ်မျဉ်း၏ စတိုင်ကို အားလုံးအတွက် တစ်ပြိုင်နက် သို့မဟုတ် တစ်ခုချင်းစီအတွက် သတ်မှတ်ပေးသည်။ ၎င်းသည် အောက်ပါဂုဏ်သတ္တိများအတွက် အတိုကောက် ဂုဏ်သတ္တိတစ်ခု ဖြစ်သည်- border-left-style, border-right-style, border-top-style, border-bottom-style.

ဝါကျဖွဲ့ပုံ

selector {
	border-style: value;
}

တန်ဖိုးများ

တန်ဖိုး	ဖော်ပြချက်
`solid`	အပြတ်မျဉ်း။
`dotted`	အစက်များပုံစံ နယ်နမိတ်မျဉ်း။
`dashed`	အတုံ့မျဉ်းပုံစံ နယ်နမိတ်မျဉ်း။
`ridge`	ဖောင်းကြွသည့်မျဉ်းပုံစံ နယ်နမိတ်မျဉ်း။
`double`	မျဉ်းနှစ်ကြောင်းပုံစံ နယ်နမိတ်မျဉ်း။ အကျိုးသက်ရောက်မှုကို မြင်တွေ့ရန် နယ်နမိတ်မျဉ်းအထူသည် အနည်းဆုံး `3px` ရှိရမည်။
`groove`	ချိုင့်ဝင်သည့် နယ်နမိတ်မျဉ်း။
`inset`	ဖိနှိပ်ထားသည့် နယ်နမိတ်မျဉ်း။
`outset`	ဖောင်းကြွသည့် နယ်နမိတ်မျဉ်း။
`none`	နယ်နမိတ်မျဉ်း မရှိခြင်း။

စံထားရာတန်ဖိုး- none.

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

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

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

ဥပမာ . solid တန်ဖိုး

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

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

ဥပမာ . dotted တန်ဖိုး

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

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

ဥပမာ . dashed တန်ဖိုး

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

#elem {
	border-width: 1px;
	border-style: dashed;
	border-color: black;
	width: 300px;
	height: 100px;
}

ဥပမာ . ridge တန်ဖိုး

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

#elem {
	border-width: 3px;
	border-style: ridge;
	border-color: black;
	width: 300px;
	height: 100px;
}

ဥပမာ . double တန်ဖိုး

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

#elem {
	border-width: 3px;
	border-style: double;
	border-color: black;
	width: 300px;
	height: 100px;
}

ဥပမာ . groove တန်ဖိုး

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

#elem {
	border-width: 3px;
	border-style: groove;
	border-color: black;
	width: 300px;
	height: 100px;
}

ဥပမာ . inset တန်ဖိုး

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

#elem {
	border-width: 3px;
	border-style: inset;
	border-color: black;
	width: 300px;
	height: 100px;
}

ဥပမာ . outset တန်ဖိုး

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

#elem {
	border-width: 3px;
	border-style: outset;
	border-color: black;
	width: 300px;
	height: 100px;
}

ဥပမာ

ဤဥပမာတွင် element ၏ မတူညီသောဘက်များအတွက် မတူညီသော နယ်နမိတ်မျဉ်းအမျိုးအစားများ သတ်မှတ်ထားသည်-

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

#elem {
	border-width: 1px;
	border-style: solid dotted dashed dotted;
	border-color: black;
	width: 300px;
	height: 100px;
}

ဥပမာ

ယခုတွင် element ၏ မတူညီသောဘက်များအတွက် နယ်နမိတ်မျဉ်း၏ အထူနှင့် အရောင်ကိုလည်း မတူညီစွာ သတ်မှတ်ထားသည်-

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

#elem {
	border-width: 1px 2px 3px 4px;
	border-style: dashed dotted solid double;
	border-color: red blue green black;
	width: 300px;
	height: 100px;
}

ဥပမာ

ယခုတွင် အပေါ်နှင့် အောက်နယ်နမိတ်မျဉ်းများအတွက် solid အမျိုးအစားကို သတ်မှတ်ထားပြီး ညာနှင့် ဘယ်ဘက်များအတွက် dotted အမျိုးအစားကို သတ်မှတ်ထားသည်-

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

#elem {
	border-width: 1px;
	border-style: solid dotted;
	border-color: black;
	width: 300px;
	height: 100px;
}

ဆက်လက်ဖတ်ရှုရန်

border-color ဂုဏ်သတ္တိ,
အရာသည် နယ်နမိတ်မျဉ်း၏ အရောင်ကို သတ်မှတ်ပေးသည်
border-width ဂုဏ်သတ္တိ,
အရာသည် နယ်နမိတ်မျဉ်း၏ အထူကို သတ်မှတ်ပေးသည်
border ဂုဏ်သတ္တိ,
အရာသည် နယ်နမိတ်မျဉ်းအတွက် အတိုကောက် ဂုဏ်သတ္တိတစ်ခု ဖြစ်သည်