Membuat Rounded Corner dengan CSS3

Membuat Rounded Corner dengan CSS3, pada tampilan suatu situs web sering kita temukan ada yang menggunakan sudut melengkung atau tidak siku pada design tampilannya. Sudut lengkung atau rounded corner tersebut berguna untuk membuat tampilan website atau blog kita semakin hidup dan menarik sehingga pengunjung merasa lebih nyaman berada di website atau blog kita.

Pada zaman dahulu kala untuk membuat suatu sudut melengkung pada suatu kotak dibutuhkan bantuan gambar untuk ke-empat sisinya sehingga memakan waktu cukup banyak untuk membuatnya, sekarang dengan bantuan CSS3 membuat rounded corner semakin mudah. Adapun code atau script CSS untuk membuat tampilan kotak anda dengan sudut melengkung untuk seluruh browser sebagai berikut :

-moz-box-shadow: 0 0 25px #999;
-webkit-box-shadow: 0 0 25px #999;
-o-box-shadow: 0 0 25px #999;
box-shadow: 0 0 25px #999;

-moz-border-radius: 25px;
-webkit-border-radius: 25px;
-o-border-radius: 25px;
border-radius: 25px;

-moz-border: 2px solid #ddd;
-webkit-border: 2px solid #ddd;
-o-border: 2px solid #ddd;
border: 2px solid #ddd;

Keterangan script :

warna merah untuk membuat efek bayangan pada kotak
warna hijau untuk membuat efek lengkung pada kotak
warna biru untuk membuat tebal garis pada kotak
-moz digunakan untuk browser mozilla
-webkit digunakan untuk browser chrome dan safari
-o digunakan untuk browser opera

Demikian semoga tutorial cara membuat rounded corner dengan CSS3 ini bisa membuat tampilan website atau blog anda semakin berwarna dan menarik. Semoga bermanfaat dan selamat mencoba.

Browse More Articles

Written by Unknown

Kami melayani pembuatan berbagai macam web aplikasi sesuai kebutuhan anda, dapatkan harga terbaik dan jasa amanah dari kami."Menerima dengan sumringah dan mengerjakan penuh amanah"