Membuat border radius atau sudut lengkung

irnanto.com – Membuat border radius atau sudut lengkung di web menggunakan CSS sangatlah mudah karena eleman HTML yang akan dibuat bordernya menjadi melengkung dapat menambahkan sedikit kode CSS untuk dapat merubahnya menjadi melengkung. Sebenarnya teknik untuk membuat border menjadi melengkung sudah lama dibicarakan dan sekarang ini banyak sekali web atau blog yang memiliki tampilan layout yang bagus, ada yang menggunakan animasi, gambar, serta bentuk-bentuk layout yang berfariasi.

kali ini saya akan sedikit menjelaskan bagaimana membuat sudut tampilan layout, baik itu menggunakan tag div ataupun yang lainnya agar menjadi lengkung. Untuk membuat sudut yang melengkung atau tidak siku, kita membutuhkan pengatutan di CSS (Cascading Style Sheet). Yang mana code css ini akan mengatur radius lengkungan dari sebuah div atau elemen yang ingin dibuat lengkung. Setiap browser memiliki engine yang berbeda-beda oleh karena itu kode CSS yang digunakan pun berbeda. Di sini saya akan menjelaskan 3 jenis engine yang paling banyak dingunakan oleh orang. yang pertama gecko yang digunakan oleh mozilla, webkit yang dingunakan oleh chrome dan safari, dan presto yang digunakan oleh browser opera. OK langsung saja kita melihat perbedaannya, di bawah ini adalah contoh code css-nya

-moz-border-radius:10px; /*untuk mozilla*/
-webkit-border-radius:10px; /*untuk chrome dan safari*/
-o–border-radius:10px; /*untuk opera*/

Code css di atas merupakan standar dari masing-masing browser, tetapi untuk versi browser yang terbaru atau saat ini, anda cukup menuliskan satu baris code css saja kedalam web anda, tentunya di bagian elemen yang ingin anda atur border radius-nya. Code tersebut seperti di bawah ini :

border-radius:10px;

Code css di atas akan mensupport browser mozilla, chrome, safari, and opera. Silahkan anda bereksperimen untuk kode-kode css yang lainnya. Sekian dari saya mengenai Membuat border radius atau sudut lengkung di web menggunakan CSS. Selamat mencoba.