Cara Membuat Garis Melengkung

Cara Membuat Garis Melengkung (border-radius)

Oke, serambi menunggu sahur saya akan mengajarkan pada anda bagaimana cara membuat garis melengkung di blog. Seperti yang ada di blog saya ini

Lihat di bagian judul sidebar, melengkungkan? bagaiman cara membuatnya? mudah sekali. Model melengkung seperti itu biasa di kenal dengan border-radius. Demo livenya seperti ini

Berikut ini adalah demo langsung untuk border-radius. Lihat di pinggiran/tepinya melengkung bukan? jika tidak berarti anda harus mengganti broser anda, karena CSS ini hanya untuk browser Mozila/Firefox, Google chrome atau Safari terbaru

Kode yang di gunakan seperti ini

<div style="-moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; background-color: #ccc; border: 2px solid black; color: #000; font-family: Arial;padding: 5px;">
<span style="font-size:normal;">Berikut ini adalah demo langsung untuk <b><span style="color: black;">border-radius</span></b>. Lihat di pinggiran/tepinya melengkung bukan? jika tidak berarti anda harus mengganti broser anda, karena CSS ini hanya untuk browser Mozila/Firefox, Google chrome atau Safari terbaru</span></div>

Jangan lihat semuanya, kepanjangan haha. Kode yang berwarna merah itulah yang berfungsi untuk membuat lengkungannya. Oh iya...Itu terdiri dari 2 kode untuk 2 browser berbeda, yaitu mozilla/firefox dan google chrome. Untuk jelasnya -moz-border-radius: 10px 10px 10px 10px; kode inilah yang untuk mozilla/firefox. Lalu -webkit-border-radius: 10px 10px 10px 10px; inilah yang untuk google chrome. Perbedaannya hanya ada di depan kode yaitu -moz- untuk mozilla/firefox dan-webkit- untuk google chrome. Jadi pasanglah kedua kode itu jika ingin menampilkan lengkungan di ke 2 browser itu. Nah sekarang mari kita coba artikan kode tersebut secara gamblang hahaha, detail maksudnya.

border-radius: 10px(radius pojok kiri atas) 10px(radius pojok kanan atas) 10px(radius pojok kanan bawah) 10px(radius pojok kiri bawah);

Mengertikan? jadi jika ingin mengatur lengkungannya tinggal ubah saja angka 10px nya. Semakin kecil nilainya semakin kecil pula lengkungannya dan sebaliknya. Jadi jika ingin membuat salah satu pojok tidak melengkung tinggal ganti dengan angka 0. Mudahkan? mudah sekali.
Oh iya contoh jika ingin memasukannya kedalam templates, misalnya untuk judul sidebar seperti saya. Berarti tinggal menambahkanya kedalam kode h2 { seberti ini

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

Oke sekian pembelajaran kita hari ini, saya akhiri wasalam :)