Properti border-radius pada CSS3 memungkinkan kita untuk membuat button yang berbentuk rounded rectangle. Dahulu sebelum adanya properti border-radius, untuk membuat persegi yang pinggirnya tumpul (–“) atau yang disebut rounded corners, kita harus menggunakan gambar. Tetapi sekarang ini kita dapat memanfaatkan properti dari CSS3 tersebut.
Properti border-radius ini mulai dapat digunakan pada tahun 2005, tetapi sebagaimana yang kita ketahui bahwa perkembangan masing-masing browser terdapat perbedaan hingga pada akhirnya sekarang semua browser telah support dengan properti border-radius ini.
Cara Menggunakan Border Radius CSS3
Cara menggunakan border radius sangat mudah. Untuk penggunaan secara simplenya kita dapat menggunakan kode:
#your-div{ border-radius: 12px; }
Nah sebagai latihan, saya juga membuat penerapannya di sebuah template HTML.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Border Radius</title> <link rel="stylesheet" href="style.css"/> </head> <body> <div id="border-radius"> <p>Hello, This is border radius using CSS3</p> </div> </body> </html>
Sedangkan file CSS dari index.html tersebut adalah sebagai berikut:
p{ font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; } #border-radius{ width: 500px; margin: 40px auto; background: #03F; text-align: center; padding: 20px; border-radius: 12px; }
File index.html di atas, jika dijalankan melalui browser akan menghasilkan tampilan seperti di bawah ini.
Penggunaan Border Radius
Syntax border-radius: 12px artinya kita akan memberikan jarak melingkar dari pusat lingkaran ke pinggir sejauh 12px ke masing-masing ujungnya. Lalu bagaimana jika kita ingin mengkustomisasi masing-masing sudut. Nah, untuk itu kita dapat menggunakan syntax seperti berikut ini:
- border-bottom-left-radius,
- border-bottom-right-radius,
- border-top-left-radius,
- border-top-right-radius
Untuk penggunaannya bisa dilihat pada gambar di bawah ini. (Gambar diambil dari website CSS3).
Semoga bermanfaat. Sumber: css3.info