CSS3 မှာ border-radius ဆိုတဲ့ property အသစ်ပါဝင်လာခဲ့ပါတယ်။ border-radius ဆိုတာကတော့ border ရဲ့ထောင့်တွေကို ကွေးဖို့ဖြစ်ပါတယ်။ တကယ်လို့များ ကိုယ်သုံးတဲ့ element မှာ border မပါဘူးဆိုရင်တော့ element ရဲ့ background ကိုအကျိုးသက်ရောက်မှာဖြစ်ပါတယ်။

Border-radius property ကိုသုံးမယ်ဆိုရင်တော့အောက်ကလိုသုံးကြောင်းကြေငြာပေးရပါမယ်။

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

ဒါဆိုရင်တော့ ထောင့်လေးထောင့်လုံး 10px ကွေးနေတဲ့ပုံကိုမြင်ရမှာပါ။

ပထမပုံမှာတော့ border ထဲ့ထားပြီး နောက်တစ်ပုံမှာတော့ border မထဲ့ထားတာတွေ့ရမှာပါ။

ထောင့်လေးထောင့်လုံးမကွေးချင်ရင်တော့ ဒီလိုရေးလို့ရပါတယ်။

-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;

ဆိုပြီး ကိုယ်ကွေးချင်တဲ့ ထောင့်အတွက်ပဲရေးပေးလဲရပါတယ်။ အခုကတော့ လေးထောင့်လုံးကွေးထားတာပါ။ ဒီနေရာမှာ တစ်ခုသတိထားရမှာက moz မှာရေးပုံက သူများတွေနဲ့ အနည်းငယ် ကွဲလွဲတယ်ဆိုတာကိုပါ။ ဒီအတိုင်းရေးရတာ ရှည်တယ်ဆိုရင်တော့ ဒီလိုမျိုးလေးရေးကြည့်ရအောင်ဗျာ။

-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;

ပထမဆုံးက top-left, ပြီးတော့ top-right, ပြီးတော့ bottom-right, နောက်ဆုံးက bottom-left ပါ။

ဒီလိုရေးလဲရပါသေးတယ်။

-moz-border-radius: 10px  5px;
-webkit-border-radius: 10px  5px;
border-radius: 10px  5px;

အရှေ့က တန်ဖိုးက top-left နဲ့ bottom-right ပါ။ အနောက်က တန်ဖိုးက top-right နဲ့ bottom-left ပါ။

-moz-border-radius: 10px/50px;
-webkit-border-radius: 10px/50px;
border-radius: 10px/50px;

ကဲ…ဒါမျိုးရေးလိုက်ရင်ဘာတွေ ထူးခြားသွားမလဲ ကြည့်ကြည့်ရအောင်။

ကွေးတော့ကွေးသွားတယ်… ဘယ်လိုကွေးနေမှန်းသာ မသိတာ။ 10px/50px လို့ပြောလိုက်တာက border-radius ကို rounded လုပ်တဲ့အခါမှာ horizontal ကို 10px ပဲကွေးပေးပါ၊ vertical ကိုတော့ 50px ကွေးပေးပါလို့ပြောလိုက်တာပါ။

အစိမ်းရောင်ပုံလေးကိုကြည့်ကြည့်ပါ။ ကွေးမယ့်ထောင့်က ၉၀ဒီဂရီ ရှိတယ်။ ဒါကို ၄၅ဒီဂရီ မျဉ်းစောင်းတစ်ခုနဲ့ ပိုင်းလိုက်တယ်။ A ကတော့ Horizontal အတွက်ကိုယ်စားပြုပြီး B ကတော့ Vertical အတွက်ကိုယ်စားပြုပါတယ်။

အဲ့ဒီမှာ A ကသူကွေးရမယ့် 10px ကိုကွေးလိုက်တယ်။ B ကလဲ 50px ကိုကွေးလိုက်တယ်။

ဒီပုံမှာကြည့်လိုက် အနီရောင်မျဉ်းရဲ့ ထိပ်က A နဲ့ Bဆုံတဲ့ ၉၀ဒီဂရီထောင့်နေရာ။ A ကတော့ 10px ဆိုတော့ နဲနဲပဲကွေးပေးထားပြီး B ကတော့ 50px ဆိုတော့ များများကွေးပေးထားရတယ်။ ပုံမှန်ဆိုရင် border-radius: 10px; ဆိုပြီးသာကြေငြာတယ်လေ။ ဒီအခါမှာ browser က horizontal radius ရော vertical radius  ကိုပါ ၁၀လို့မှတ်ယူပြီး လုပ်ဆောင်ပေးလိုက်တယ်။ ဒီအခါမှာ horizontal ရော vertical ပါအချိုးအစားညီတဲ့အတွက် ညီညာလှပတဲ့ rounded radius လေးထွက်ပေါ်လာပါတယ်။

ညီညာတဲ့ ပုံစံမဟုတ်တဲ့ rounded radius တွေလိုချင်တဲ့အခါမှာ ဒီလို slash ခံပြီး ရေးလို့ရတယ်ဆိုတာသိထားသင့်ပါတယ်။

ကဲ…အားလုံးပဲ ပျော်ရွှင်ကြည်နူး နိုင်ကြပါစေဗျာ…။

width: 150px;
height: 100px;
-moz-border-radius: 13em/3em;
border: 1px solid #989898;
background: #e3e3e3;

3 Responses

1. K says:

   June 2, 2011 at 7:38 PM

   How about in IE? ^^

   Reply
2. reader says:

   June 2, 2011 at 9:32 PM

   ie9 support rounded corner.

   but not support in ie8

   Reply
3. Thiha says:

   June 2, 2011 at 9:47 PM

   You can fix that problem with this

   http://dimox.net/cross-browser-border-radius-rounded-corners/

   Reply