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 :)

3 komentar:

Bang Koko, 2 October 2010 at 13:27 | [Reply]

nice post mas....

salam knl ya.....

skalian follow kamu di no urut 178.....

jgn lupa follow balik ya..

Jana Virananda, 27 November 2010 at 08:09 | [Reply]

Akhirnya ketemu juga kode buat garis melengkung ... :)

Dandy Alesana, 10 June 2011 at 02:47 | [Reply]

gx jalan.. ada cara lain kah?

Post a comment

Kotak Komentar Klasik Klik Di sini

« Prev Next » Home