Membuat Lengkungan Sisi Dengan Border Radius

Seringkali kita melihat beberapa template memiliki bentuk melengkung di setiap sisinya, yang tentunya membuat tampilan semakin menarik dan terkesan tidak kaku.

Untuk membuat sisi lengkung kita bisa menggunakan CSS3 dan untuk mempermudah kita bisa menggunakan border radius generator, tools ini difungsikan untuk mempermudah pembuatan border radius.

Contohnya disini saya menginginkan sisi lengkung di semua bagian, caranya masukkan berapa sisi lengkung yang Anda inginkan pada kotak di masing-masing sisi tersebut.

Saya ingin membuat sisi lengkung 30px untuk semua sisi (caranya masukkan angka 30 disemua kotak yang ada ) maka kode yang dihasilkan :

-webkit-border-radius: 30px;

-moz-border-radius: 30px;

border-radius: 30px;

Namun, jika Anda hanya ingin membuat sisi lengkung dibagian atas saja maka masukkan berapa ukuran yang diinginkan, disini saya menginginkan 15px untuk lengkung bagian atas untuk bagian bawah isikan 0px karena 0px berarti tidak ada lekukan sama sekali, maka kode yang dihasilkan :

-webkit-border-top-left-radius: 15px;

-webkit-border-top-right-radius: 15px;

-moz-border-radius-topleft: 15px;

-moz-border-radius-topright: 15px;

border-top-left-radius: 15px;

border-top-right-radius: 15px;

Anda dapat menyesuaikan berapa ukuran yang diinginkan, semakin besar nilainya maka semakin besar pula lengkungan yang dihasilkan.

Contoh lengkungan dengan menggunakan CSS :

Keterangan :

• moz = mozila, webkit = chrome dan safari, keterangan moz dan webkit merupakan perintah terhadap browser supaya efek tersebut bisa berjalan jika menggunakan browser tersebut.
• border adalah perintah untuk bagian garis sisi-sisinya
• radius adalah kode perintah untuk membuat sudut lengkung
• top-left berarti sisi lengkung berada di bagian atas sebelah kiri, dsb

Selamat Mencoba dan Semoga Bermanfaat