css_12

CSS Border

CSS မွာ Element တစ္ခုမွာရွိတဲ့ Border Style ကိုလဲ လိုသလို ပံုစံေျပာင္းလို႔ရတယ္၊ အလွဆင္လို႔ရတယ္၊  Border Style ကိုေျပာင္းဖို႔အတြက္ သံုးတဲ့ Property ကေတာ့ body-style ပါ၊ ဥပမာ သင္က paragraph တစ္ခုကို border ထည့္ခ်င္တယ္ဆိုပါစို႔ <p> this is the paragraph </p>  ဒါဆိုရင္ေတာ့သံုးရမယ့္ CSS က p {boder-style:dotted;} ဒီမွာသံုးတဲ့ value ကေတာ့ dotted ပါ၊ သူရဲ့ အဓိပၸါယ္ကေတာ့ အစက္အေျပာက္ေလးေတြလို႔အဓိပၸါယ္ရပါတယ္၊ ေအာက္မွာ dotted border ကိုဥပမာ ၾကည့္ပါ၊

dotted: ဒီစာသားကို၀ိုင္းထားတာ dotted border နဲ႔                                                                                                                        

dashed: ဒီစာသားကို၀ိုင္းထားတာက dashed border နဲ႔၊ ေရးရင္ border-style:dashed; လို႔ေရး

solid: ဒီစာသားကို၀ိုင္းထားတာက Solid border နဲ႔ ေရးရင္ border-style:solid; လို႔ေရး

double: ဒီစာသားကို ၀ိုင္းထားတာက double border နဲ႔ (ႏွစ္ထပ္ border လို႔ေျပာတယ္) ေရးရင္ေတာ့ border-style:double; လို႔ပဲေရးတယ္၊

groove: ဒီစာသားကိုေတာ့ 3d grooved border နဲ႔ ၀ိုင္းထားတယ္၊ ေရးရင္ border-style:groove; လို႔ေရးရတယ္၊ သက္ေရာက္မူကို border အေရာင္ေပၚမွာ မူတည္တယ္၊

ridge: ဒီစာသားကိုေတာ့ 3d ridge border နဲ႔ ၀ိုင္းထားတယ္၊ ေရးရင္ border-style:ridge; လို႔ေရးရတယ္၊ သက္ေရာက္မူကို border အေရာင္ေပၚမွာ မူတည္တယ္၊

inset: ဒီစာသားကိုေတာ့ 3d inset border နဲ႔ ၀ိုင္းထားတယ္၊ ေရးရင္ border-style:inset; လို႔ေရးရတယ္၊ သက္ေရာက္မူကို border အေရာင္ေပၚမွာ မူတည္တယ္၊

outset: ဒီစာသားကိုေတာ့ 3d outset border နဲ႔ ၀ိုင္းထားတယ္၊ ေရးရင္ border-style:outset; လို႔ေရးရတယ္၊ သက္ေရာက္မူကို border အေရာင္ေပၚမွာ မူတည္တယ္၊

Border Width

Border ေတြရဲ့ အက်ယ္ကိုလဲ ခ်ိန္ညိွလို႔ရပါေသးတယ္၊ သံုးရမယ့္ Property ကေတာ့ border-width ပါ၊ Border ေတြရဲ့ အက်ယ္ကိုခ်ိန္ညွိဖို႔အတြက္ pixel ကိုအသံုးျပဳပါတယ္၊ Border ေတြကို thin အေသး၊ medium အလယ္အလတ္၊ thick အထူ ဆိုျပီး သံုးမ်ိဳးလဲအသံုးျပဳႏိုင္ပါေသးတယ္၊ ေအာက္မွာ ဥပမာ သံုးျပတာကိုေလ့လာပါ၊

p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}

Border Color

The border-color property is used to set the color of the border. The color can be set by:

Border ေတြရဲ့အေရာင္ကိုလဲ သင့္စိတ္ၾကိဳက္ စတိုင္းထုတ္လို႔ရပါေသးတယ္၊ သံုးရမယ့္ Property ကေတာ့ border-color ပါ၊ ေအာက္မွာဥပမာ ၾကည့္ပါ၊

Example

p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}

Border - Individual sides

Border ေတြက ေလးဖက္ေလးမ်က္ႏွာရွိပါတယ္၊ ဒါကိုပဲ သင္တို႔က တစ္ဖက္စီက border ကို ပံုစံတစ္မ်ိဳးစီနဲ႔ Style ထုတ္ႏိုင္ပါတယ္ေအာက္မွာဥပမာ ၾကည့္ပါ၊

Example

p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:doublee;
border-left-style:dashed;
}

အထက္က ပံုစံအတိုင္းေရးလိုက္ရင္ေတာ့ border ရဲ့အေပၚပိုင္းက အစက္ေလးေတြ နဲ႔ တည္ေဆာက္တဲ့ border ကိုရမယ္၊ border ရဲ့ ညာဘက္ကေတာ့ ပံုမွန္ border ကိုရမယ့္၊ border ရဲ့ေအာက္ပိုင္းကေတာ့ ႏွစ္ထပ္ border ကိုရမယ္၊ ေဘာ္ဒါရဲ့  ဘယ္ဘက္အပိုင္းကေတာ့ Dash (မ်ဥ္းျဖတ္ေလး) ေတြနဲ႔ တည္ေဆာက္ထားတဲ့ border ကိုရမယ္၊

Border Property ကိုအတိုေကာက္လဲေရးႏိုင္တယ္၊

Example

• border-style:dotted solid;

အထက္မွာေရးထားတာက အထက္နဲ႔ ေအာက္ border တို႔ကို အစက္ကေလးေတြ သံုးတဲ့ border အျဖစ္ထားတယ္၊ ညာနဲ႔ ဘယ္ border ကိုပံုမွန္ border အထူထားမယ္လို႔ေရးတာပါ၊

Example

• border-style:dotted;

အထက္မွာေရးထားတာကေတာ့ borderz ေလးဘက္လံုးကို အစက္ေလးေတြနဲ႔ တည္ေဆာက္မယ္လို႔ေရးတာပါ၊

Border - Shorthand property

Border ေတြရဲ့စတိုင္းကို ေရးတဲ့အခါ အတိုေကာက္ေရးလို႔ရပါတယ္၊  ေလးဖက္လံုးက border ေတြရဲ့အေရာင္ကိုလဲ တစ္ခုနဲ႔ တစ္ခုမတူေအာင္ထားလို႔ရပါေသးတယ္၊ အတိုေကာက္ေရးတဲ့အခါမွာေတာ့ အစီအစဥ္ အလုိက္ေအာက္က အတိုင္းေရးႏိုင္ပါတယ္၊

• border-width
• border-style (required)
• border-color

Example

border:5px solid red;

အထက္က အတိုေကာက္ေရးထားတာက border ရဲ့ အက်ယ္က 5 pxiel , border ရဲ့ style က Solid, border ရဲ့ အေရာင္က red; လို႔ သံုးမ်ိဳးလံုးကို အတိုေကာက္ေရးနည္းနဲ႔ ေရးလိုက္တာပါ၊

All CSS Border Properties

Property	Description
border	Declaration တစ္ခုထဲမွာ Border Properties ကိုသတ္မွတ္ရာမွာသံုး
border-bottom	Declaration တစ္ခုထဲမွာပါတဲ့ border ရဲ့ ေအာက္ပိုင္း ကိုသတ္မွတ္ရာမွာသံုး
border-bottom-color	Border ရဲ့ ေအာက္ပိုင္း အေရာင္ ကိုသတ္မွတ္ရာမွာသံုး
border-bottom-style	Border ရဲ့ ေအာက္ပိုင္း Style ကိုသတ္မွတ္ရာမွာသံုး
border-bottom-width	Border ရဲ့ေအာက္ပိုင္း အက်ယ္ကို သတ္မွတ္ရာမွာသံုး
border-color	Borders ရဲ့အေရာင္ကုိ သတ္မွတ္ရာမွာသံုး
border-left	ီDeclaration တစ္ခုထဲမွာပါတဲ့ border ရဲ့ဘယ္ဘက္ပိုင္း ကိုသတ္မွတ္ရာမွာသံုး
border-left-color	Border ရဲ့ ဘယ္ဘက္အပိုင္း အေရာင္ ကိုသတ္မွတ္ရာမွာသံုး
border-left-style	Border ရဲ့ ဘယ္ဘက္အပိုင္း Style ကိုသတ္မွတ္ရာမွာသံုး
border-left-width	Border ရဲ့ ဘယ္ဘက္ အပိုင္း အက်ယ္ကို သတ္မွတ္ရာမွာသံုး
border-right	ီDeclaration တစ္ခုထဲမွာပါတဲ့ border ရဲ့အေပၚပိုင္း ကိုသတ္မွတ္ရာမွာသံုး
border-right-color	Border ရဲ့ ညာဘက္အပိုင္း အေရာင္ ကိုသတ္မွတ္ရာမွာသံုး
border-right-style	Border ရဲ့ ညာဘက္အပိုင္း Style ကိုသတ္မွတ္ရာမွာသံုး
border-right-width	Border ရဲ့ ညာဘက္ အပိုင္း အက်ယ္ကို သတ္မွတ္ရာမွာသံုး
border-style	Borders ရဲ့ေလးဖက္ ေလးဖက္လံုး Style ကိုသတ္မွတ္ရာမွာသံုး
border-top	ီDeclaration တစ္ခုထဲမွာပါတဲ့ border ရဲ့ အေပၚပိုင္း ကိုသတ္မွတ္ရာမွာသံုး
border-top-color	Border ရဲ့ အေပၚပိုင္းအေရာင္ကို သတ္မွတ္ရာမွာသံုး
border-top-style	Border ရဲ့ အေပၚပိုင္း Style ကိုသတ္မွတ္ရာမွာသံုး
border-top-width	Border ရဲ့ အေပၚပိုင္း အက်ယ္ကို သတ္မွတ္ရာမွာသံုး
border-width	Border ရဲ့ေလးဖက္လံုး အက်ယ္ကို သတ္မွတ္ရာမွာသံုး