Efek Lengkung Border Di Css3

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

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

Properti CSS3 yang mana dapat dipakai untuk hal itu?

Border Radius CSS3.

Dengan Border Radius CSS3 memungkinkan kita memperlihatkan efek lengkung pada setiap sudut border, dapat 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 memperlihatkan efek lengkung pada setiap sudut elemen perlu menggunakan:

Untuk value dapat gunakan length atau %. Tetapi kalau terlalu ribet, dapat gunakan cara singkatnya:

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:

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:

Contoh outputnya:

Sebagaimana alinea sebelumnya bahwa dengan Border Radius CSS3 memungkinkan kita memperlihatkan efek lengkung pada setiap sudut border, dapat 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:

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