Border-radius: Buat Rounded Corners (Sudut Bulat) Dengan CSS!

Border-radius: create rounded corners with CSS!

W3C telah menawarkan beberapa opsi baru untuk border di CSS3, salah satunya adalah border-radius.

Mozila / Firefox, chrome dan Safari 3 telah mengimplementasikan fungsi ini, yang memungkinkan Anda untuk membuat sudut bulat pada kotak-item / box.

Mozilla/Firefox, chrome and Safari 3 users should see a nicely rounded box, with a nicely rounded border.

Kode untuk contoh di atas sebenarnya cukup sederhana:

<div style=" background-color: #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
padding: 10px;">Text</div>

Sudut yang berbeda juga dapat diatur di taip tiap sudutnya. Mozilla memiliki beberapa nama lain untuk fitur fitur ini seperti -moz-border-radius-topright sebagai lawan dari -webkit-border-top-right-radius :

Mozilla/Firefox and Safari 3 users should see a box with a rounded left upper corner.

Mozilla/Firefox and Safari 3 users should see a box with a rounded right upper corner.

Mozilla/Firefox and Safari 3 users should see a box with a rounded left lower corner.

Mozilla/Firefox and Safari 3 users should see a box with a rounded right lower corner.

Semua itu tadi menggunakan fungsi dari :

• -moz-border-radius-topleft / -webkit-border-top-left-radius
  
• -moz-border-radius-topright / -webkit-border-top-right-radius
  
• -moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
  
• -moz-border-radius-bottomright / -webkit-border-bottom-right-radius

*.:｡✿ Don't forget to come back again ✿.｡.:*

Visit Wahyudi Blog !
Sumber: css3.info