Border

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

ဒီခန်းပြီးရင် ဘာတတ်သွားမလဲ

Border နှင့် radius ကိုသုံးတတ်ရန်

border က element ကို ဘောင်ခတ်ပေးတာပါ။ Button, card, input, image frame တွေမှာ အရမ်းအသုံးများပါတယ်။ border-radius နဲ့ ထောင့်ကိုလုံးနိုင်ပြီး modern UI မှာ soft rounded corner တွေက page ကိုပိုနူးညံ့သွားစေပါတယ်။

css

.card {
  border: 1px solid #d0d7de;
  border-radius: 12px;
  padding: 16px;
}

.alert {
  border-left: 4px solid tomato;
}

You should see

Card က rounded border နဲ့သန့်သပ်လာမယ်။ Alert box က ဘယ်ဘက်မှာ tomato color border ထူထူလေးပေါ်လာပါမယ်။

Warning

Border color ကို background နဲ့ contrast မရှိအောင်အရမ်းဖျော့ထားရင် user မမြင်နိုင်ပါ။ Accessibility ကိုလည်းစဉ်းစားပါ။