Efek Lengkung Border di CSS3

Bagaimana agar border atau garis tepi suatu elemen seperti ilustrasi di sebelah kiri, di sana nampak terlihat disetiap sudut border tidak lancip, tetapi melengkung.

Sekarang ini dengan CSS3 kita bisa lakukan hal itu. Tidak seperti versi sebelum CSS3, ketika ingin membuat sudut dengan efek lengkung, kita harus gunakan gambar yang berbeda-beda dan ini terlalu ribet.

Properti CSS3 yang mana bisa digunakan untuk hal itu?

Border Radius CSS3.

Dengan Border Radius CSS3 memungkinkan kita memberikan efek lengkung pada setiap sudut border, bisa sama atau dengan efek lengkung sudut yang berbeda-beda pada keempat sudutnya. Seperti ini misalnya:

Setelah melihat kegunaan dari Border Radius CSS3, bagaimana penulisannya?

Untuk memberikan efek lengkung pada setiap sudut elemen perlu menggunakan:

border-top-left-radius: value; border-top-right-radius: value; border-bottom-right-radius: value; border-bottom-left-radius: value;

Untuk value bisa gunakan length atau %. Tetapi jika terlalu ribet, bisa gunakan cara singkatnya:

border-radius: topleft topright bottomright bottomleft;

topleft nilai untuk border-top-left-radius, topright nilai untuk border-top-right-radius, bottomright nilai untuk border-bottom-right-radius, dan bottomleft nilai untuk border-bottom-left-radius.

Contoh berikut menetapkan lengkungan dengan nilai yang sama sebesar 20 piksel untuk setiap sudut border elemen P:

P { padding: 25px; border: 2 solid #ff4800; border-radius: 20px; }

Contoh berikut menetapkan lengkungan untuk sudut kiri atas dan sudut kanan bawah dengan nilai sebesar 20 piksel, dan untuk sudut kanan atas dan sudut kiri bawah dengan nilai sebesar 50 piksel:

P { padding: 25px; border: 2 solid #ff4800; border-radius: 20px 50px; }

Contoh outputnya:

Sebagaimana alinea sebelumnya bahwa dengan Border Radius CSS3 memungkinkan kita memberikan efek lengkung pada setiap sudut border, bisa sama atau dengan efek lengkung sudut yang berbeda-beda pada keempat sudutnya.

Tambahan: Jangan lupa menambahkan prefix -moz- untuk Firefox 3.6 dan versi sebelumnya dan prefix -webkit- untuk Chrome dan Safari. Misalnya:

P { padding: 25px; border: 2 solid #ff4800; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; }

Dengan CSS3 lainnya, kita bisa berikan efek shadow atau efek bayangan berkenaan border, bahkan menggunakan gambar sebagai border itu sendiri. Mudah-mudahan ini dilain artikel.