CSS 3 Border Radius - Rounded Corners: Cara Menggunakan dan Menuliskan Kode CSS3 Border Radius

Perkembangan dan kemajuan pada pemanfaatan kode CSS memungkinkan pengguna untuk membuat beberapa bentuk desain baru yang sebelumnya tak mungkin dilakukan tanpa bantuan javascript atau penggunaan kode css dalam jumlah bertumpuk. Bahkan beberapa animasi gerak, saat ini dapat dibuat hanya dengan memanfaatkan kode css terbaru yang lebih dikenal dengan sebutan css3.

Perkembangan yang terjadi pada css3 direspon dengan luar biasa cepat oleh beberapa browser besar, terutama Google Chrome, Safari, Opera serta Mozzila. Sementara untuk Internet Explorer beberapa kode css3 belum diakomodir dengan baik. Memang beberapa dapat difungsikan , tetapi sayangnya kode yang harus dituliskan juga berbeda sangat jauh dengan browser yang lain. Ketidak seragaman ini tentunya masih dapat dimaklumi karena banyaknya hal yang terkait di dalamnya, namun tentunya apabila perbedaan yang ada tidak terlalu jauh, maka penggunaan kode juga akan semakin mudah.

Menilik dari pesatnya perkembangan yang terjadi, kiranya para pengguna boleh merasa optimis bahwa kode css3 ini akhirnya tidak boleh tidak akan diakomodir secara total oleh semua browser. Browser yang tidak mengikuti perkembangan terbaru diyakini akan tergusur dari peta persaingan yang semakin sengit. Bukankan bukti sudah mulai terlihat, dimana IE yang begitu kuatpun saat ini mulai banyak ditinggalkan penggunannya?!

Cara Penulisan CSS3 Rounded Corners di Safari

.round{
   -webkit-border-radius: 10px;
   }

, atau dituliskan dalam bentuk :

.round{
   -webkit-border-top-left-radius: 10px;
   -webkit-border-top-right-radius:10px;
   -webkit-border-bottom-left-radius: 10px;
   -webkit-border-bottom-right-radius:10px;
   }

Cara Penulisan CSS3 Rounded Corners di Opera

.round{
   border-radius: 10px;
   }

, atau bisa juga anda tuliskan dalam bentuk :

.round{
   border-radius: 10px 10px 10px 10px;
   }

Penulisan kode seperti di atas mempunyai arti :

.round{
   border-radius: (top-left)px (top-right)px (bottom-right)px (bottom-left)px;
   }

, atau anda bisa juga menuuliskan dalam bentuk yang berbeda seperti di bawah ini :

.round{
   border-top-left-radius: 10px;
   border-top-right-radius:10px;
   border-bottom-right-radius: 10px;
   border-bottom-left-radius:10px;
   }

Cara Penulisan CSS3 Rounded Corners di Mozilla

.round{
   -moz-border-radius: 10px;
   }

, atau bisa juga anda tuliskan dalam bentuk :

.round{
   -moz-border-radius: 10px 10px 10px 10px;
   }

Penulisan kode seperti di atas mempunyai arti :

.round{
   -moz-border-radius: (topleft)px (topright)px (bottomright)px (bottomleft)px;
   }

, atau anda bisa juga menuuliskan dalam bentuk yang berbeda seperti di bawah ini :

.round{
   -moz-border-radius-topleft: 10px;
   -moz-border-radius-topright:10px;
   -moz-border-radius-bottomright: 10px;
   -moz-border-radius-bottomleft:10px;
   }

Menggabungkan kode css rounded corners dari beberapa browser

.round{
   border-radius: 10px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   }

, atau dapat juga dituliskan dalam bentuk :

.round{
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
   border-bottom-right-radius: 10px;
   border-bottom-left-radius: 10px;
   -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-left-radius: 10px;
   -webkit-border-bottom-right-radius: 10px;
   -webkit-border-bottom-left-radius: 10px;
   }

Merubah nilai rounded corners

Untuk mendapatkan lengkungan sesuai keinginan, silahkan rubah setiap nilai yang disertakan sesuai kebutuhan. Anda bisa melihat bentuk perubahan nilai dan efek yang dihasilkan melalui contoh di bawah ini.

Contoh Border Radius

Border Radius
Opera
Mozzila
Safari

Border Radius
Opera
Mozzila
Safari

Border Radius
Opera
Mozzila
Safari

Rounded Corners dengan background image

Kode CSS yang digunakan untuk 4 contoh di atas

<p style="width:300px;font-family:arial; color:#000;font-weight:900;font-size:16px;text-align:center;padding:4px 10px;margin:15px auto;background:#999;text-shadow:1px 1px 1px #fff;border-radius:15px 15px 25px 25px;-moz-border-radius:15px 15px 25px 25px;-webkit-border-radius:15px 15px 25px 25px;border:5px solid #444;">Border Radius<br />Opera<br />Mozzila<br />Safari</p>

<p style="width:300px;font-family:arial; color:#000;font-weight:900;font-size:16px;text-align:center;padding:4px 10px;margin:15px auto;background:#999;text-shadow:1px 1px 1px #fff;border-radius:15px;-moz-border-radius:15px;-webkit-border-radius: 15px;border:5px solid #444;">Border Radius<br />Opera<br />Mozzila<br />Safari</p>

<p style="width:300px;font-family:arial; color:#000;font-weight:900;font-size:16px;text-align:center;padding:4px 10px;margin:15px auto;background:#999;text-shadow:1px 1px 1px #fff;border-radius:12px 30px;-moz-border-radius:12px 30px;-webkit-border-radius:12px 30px;border:5px solid #444;">Border Radius<br />Opera<br />Mozzila<br />Safari</p>

<style type="text/css">
.box {
   height:300px;
   width:400px;
   margin:15px auto;
   background:#999 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheYKpy5jTkOrDno8yZc-ocIzox3SinAS7FN3PHnIvjM4V4dxBGBKJIEyYBR-RXhyphenhyphenn9h87d84RajHYGr4y-myf5SGm7DCE6olaVLaVjXyoZ_-jpUx1dN1_SM6u1ziTIRLh2TuE39xVrjQVl/s400/AmricWorld-2.jpg) center no-repeat;
   border-radius: 40px;
   -moz-border-radius: 40px;
   -webkit-border-radius: 40px;
   border:10px solid #fff;
   }
</style>

Kode HTML

<div class="box"></div>

Bagaimana Cara Membuat Border Radius di Internet Explorer?

Untuk membuat border radius atau rounded corners di Internet Explorer, diperlukan cara-cara atau teknik sangat khusus yang berbeda dengan apa yang kita lakukan di browser lainnya.

1. Kita dapat memanfaatkan kode css yang dipadukan dengan sebuah image (gambar) atau beberapa buah image (gambar) yang dipergunakan sebagai background untuk memperoleh bangun dengan sisi lengkung (rounded corners),
2. atau dapat juga digunakan javascript dan background image pembentuk rounded corners,
3. serta dapat juga hanya menggunakan javascript tanpa sebuah background image-pun namun mampu menciptakan sisi lengkung.
Beberapa situs memberikan solusi bagaimana membangun sebuah bentuk rounded corners, baik menggunakan kode css ataupun javascript secara gratis. Beberapa alamat di bawah ini bisa anda kunjungi:

1. Curvy Corners
2. Nifty Corners
3. Menggunakan file berekstensi .htc. Anda bisa download file beserta demo-nya di Curved Corner

Menggunakan JQuery untuk membuat effects Rounded Corners yang kompatibel di semua Browser

Selain cara-cara di atas, anda bisa juga menggunakan jquery, yang merupakan javascript paling banyak digunakan di kalangan blogger. Dengan memanfaatkan jQuery-1.3.2.js (jQuery-1.3.2.min.js) atau jQuery-1.4.2.js (jQuery-1.4.2.min.js) dan sedikit javascript tambahan, maka anda akan mendapatkan sebuah jalan keluar untuk membentuk bangun dengan sisi lengkung (rounded corners) yang kompatibel di semua browser. Banyak pilihan yang mungkin kita lakukan, karena banyak sekali yang membahas tentang hal ini. Kita akan coba satu pilihan terbaik dengan script minimal akan tetapi mampu menghasilkan bentuk rounded corners yang fleksibel untuk digabungkan dengan fungsi-fungsi yang lain. Supaya lebih fokus dalam pembahasan dan pemahaman bagaimana menciptakan efek lengkung dengan metoda ini, kita akan bahas secara tuntas di posting berikutnya.