border-color အခံ

border-color အခံသည် ဘေးအားလုံးအတွက် တစ်ပြိုင်နက်တည်း သို့မဟုတ် တစ်ဖက်စီအတွက် စွက်ထူး၏အရောင်းကို သတ်မှတ်ပေးသည်။ အခံ၏တန်ဖိုးအဖြစ် မည်သည့် အရောင်းအတွက် ယူနစ်များကိုမဆို အသုံးပြုနိုင်သည်။ စံထားရာတန်ဖိုး: ဘလောက်၏စာသားနှင့် တူညီသောအရောင်း။

ဤအခံသည် အောက်ပါအခံများအတွက် အတိုကောက်အခံဖြစ်သည်: border-left-color, border-right-color, border-top-color, border-bottom-color.

ဖွဲ့စည်းပုံ

selector {
	border-color: color;
}

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

အခံသည် 1, 2, 3 သို့မဟုတ် 4 တန်ဖိုးများကို ခြားနားချက်ဖြင့် သတ်မှတ်နိုင်သည်:

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

နမူနာ

ဘလောက်၏စွက်ထူးကို အနီရောင်သို့ ပြောင်းလဲကြပါစို့:

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

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

နမူနာ

အထက်နှင့်အောက်ဘေးအတွက် အနီရောင်စွက်ထူး၊ ညာနှင့်ဘယ်ဘေးအတွက် အပြာရောင် စွက်ထူးကို သတ်မှတ်ကြပါစို့:

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

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

နမူနာ

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

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

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

နမူနာ

တစ်ပြိုင်နက်တည်း မတူညီသောထူး၊ အမျိုးအစားနှင့် အရောင်းစွက်ထူးကို သတ်မှတ်ကြပါစို့:

<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;
}

နမူနာ

စွက်ထူး၏အရောင်းကို border-color တွင် မသတ်မှတ်ထားပါက - ၎င်းကို color အခံမှ ယူသွားမည်:

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

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

ဤအရာကိုလည်း ကြည့်ပါ

border-width အခံ,
အရာသည် စွက်ထူး၏ထူးကို သတ်မှတ်ပေးသည်
border-style အခံ,
အရာသည် စွက်ထူး၏အမျိုးအစားကို သတ်မှတ်ပေးသည်
border အခံ,
အရာသည် စွက်ထူးအတွက် အတိုကောက်အခံဖြစ်သည်