Rounded Corners with CSS3

29 January 2009

อ่านเจอจากบล็อกของ pittaya เกี่ยวกับการสั่งขอบโค้ง (rounded corners) ที่เป็นคุณสมบัติใหม่ของ CSS เวอร์ชั่น 3 (ซึ่งตอนนี้สามารถใช้ได้กับ Mozilla/Firefox และ Safari) เพียงแค่ใส่คำสั่ง CSS เพิ่มเข้าไปก็จะได้ขอบโค้งสวยงาม

คำสั่งที่ใช้เพิ่มเข้าไปใน div คือ

-moz-border-radius: 5px; // สำหรับ Mozilla/Firefox

-webkit-border-radius: 5px; // สำหรับ Safari

หรือจะให้โค้งเฉพาะมุมใดมุมหนึ่งก็ได้ เช่น มุมบนซ้าย

-moz-border-radius-topleft: 5px; // สำหรับ Mozilla/Firefox

-webkit-border-top-left-radius: 5px; // สำหรับ Safari

การสั่งให้แสดงผลแบบนี้จะไม่มีผลกับ Internet Explorer โดยจะแสดงเป็นมุมสี่เหลี่ยมตามปกติ ภาพตัวอย่างที่แสดงในเบราเซอร์ IE

no rounded corners in ie

ภาพตัวอย่างที่แสดงในเบราเซอร์  Mozilla/Firefox

rounded corners work in firefox and safari