Membuat Sudut Lengkung (Rounded Corner) Dengan CSS

Membuat Sudut Lengkung (Rounded Corner) Dengan CSS - Dalam mendesain web/blog, kita memang harus memperhatikan kualitas tampilan agar enak dilihat sehingga pengunjung lebih merasa nyaman ketika melihatnya. Rounded corner (sudut lengkung) ini bisa menjadi salah satu cara dalam memperindah tampilan web/blog kita. Dengan adanya rounded corner (sudut lengkung), maka tampilannya akan lebih menarik dan lebih hidup.

Dan berikut akan saya share cara membuat sudut lengkung (rounded corner) dengan CSS pada seluruh bagian body (wrapper) web/blog anda :

1. Caranya sangat mudah dan simple, langsung saja menuju ke menu edit html dan sisipkan script CSS berikut tepat diatas kode </head> (untuk memudahkan dalam mencari kode tersebut tekan ctrl+f) :

<style type='text/css'>
<!--
#wrapper {
-moz-box-shadow: 0 0 15px #999;
-webkit-box-shadow: 0 0 15px #999;
-o-box-shadow: 0 0 15px #999;
box-shadow: 0 0 15px #999;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
-moz-border: 3px solid #009900;
-webkit-border: 3px solid #009900;
-o-border: 3px solid #009900;
border: 3px solid #009900;
}
-->
</style>

2. Kenudian klik save/simpan template dan lihat hasilnya.

Note :
- Blok kode yang berwarna orange adalah script untuk membuat rounded corner/sudut lengkung disertai dengan efek box shadow (bayangan).
- Blok kode yang berwarna hijau adalah script untuk membuat garis tepi/border pada rounded corner tersebut. Jika anda tidak ingin ada garis tepinya, maka hapus kode ini.
- #999 dan #009900 adalah kode warna rounded corner dan garis tepinya.
- 0 0 15px dan 3px adalah tingkat kelengkungan rounded corner dan tingkat ketebalan garis tepinya.
- Preview untuk script kode tersebut bisa di lihat langsung pada blog ini.

Setiap bowser internet memiliki fitur yang berbeda-beda, dan script diatas sudah saya sesuaikan agar efek rounded corner itu bisa tampil dengan baik pada browser internet yang berbeda seperti mozilla firefox, google chrome, webkit, dan opera. Untuk penjelasannya lihat gambar berikut :

Dan jika anda ingin memodifikasi sendiri efek rounded corner itu, perhatikan gambar berikut :

Cukup sekian dulu postingan kali ini, semoga bermanfaat bagi anda semua. Selebihnya saya mohon ma'af atas segala kekurangan yang ada. Salam sejahtera by ngeposta...

Anda sedang membaca Artikel berjudul Membuat Sudut Lengkung (Rounded Corner) Dengan CSS, dan dengan URL http://kabarkabaru.blogspot.com/2012/09/membuat-sudut-lengkung-rounded-corner.html. Anda boleh membagikan artikel Membuat Sudut Lengkung (Rounded Corner) Dengan CSS ini kepada Teman - Teman anda namun jangan lupa mencantumkan link Membuat Sudut Lengkung (Rounded Corner) Dengan CSS sebagai Sumbernya.Terima Kasih