Membuat Rounded Corner / Sudut Tumpul di blog

Untuk membuat sudut tumpul atau rounded corner. Rounded corner ini biasanya digunakan oleh blogger untuk mempercantik tampilan blognya. Selain dapat digunakan sebagai pemanis, rounded corner ini juga bisa menjadi pilihan terbaik kita untuk menampilkan sebuah bidang bersudut tumpul tanpa menggunakan gambar. Karena dalam proses pembuatannya kita hanya cukup menanamkan sedikit kode tambahan pada file CSS kita.

Add caption

Cara yang dilakukan untuk membuat rounded corner ini sebenarnya cukup sederhana karena hanya menambahkan sedikit kode style pada html border.

Misal jika membuat border kita menggunakan kode <div style=”border:2px solid #999;”>contoh</div>, maka kita cukup menambahkan border-radius: 10px ;  di dalam bagian style.

Jadi secara keseluruhan kode html-nya akan menjadi seperti di bawah ini,

 <div style=”border: 2px solid #999999; border-radius: 10px ; text-align: center;”><em>contoh</em></div>

Berikut kode-kodenya ;

ganti dengan -moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-radius-topleft: 10px;
-webkit-border-radius-topright: 10px;
-khtml-border-radius-topleft: 10px;
-khtml-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;


ganti dengan -moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-radius-bottomleft: 10px;
-webkit-border-radius-bottomright: 10px;
-khtml-border-radius-bottomleft: 10px;
-khtml-border-radius-bottomright: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;


ganti dengan -moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-radius-topleft: 10px;
-webkit-border-radius-bottomright: 10px;
-khtml-border-radius-topleft: 10px;
-khtml-border-radius-bottomright: 10px;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;

border radius10px ini dapat kita rubah dan di variasikan dengan berbagai cara sesuka hati sesuai dengan kebutuhan. Semakin besar nilai atau angka yang dimasukkan maka semakin besar pula daerah lengkungan yang dibuat.

Selamat mencoba semoga bermangfaat..

ARTIKEL TERKAIT: