Tutorial Belajar CSS 3 Part 2 – CSS3 Rounded Corners
Selamat datang di Warung Belajar, Alhamdulillah di tutorial ini kita sudah menginjak pembahasan di CSS 3, dalam tutorial ini kita akan membahas mengenai CSS3 Rounded Corners.
CSS3 Rounded Corners adalah salah satu fitur yang dimiliki CSS3 yang digunakan untuk membuat lengkungan pada sudut objek, jika dalam tutorial CSS kita sudah membahas mengenai box model di CSS, dalam tutorial tersebut kita belajar bagaimana membuat box yang secara default untuk sudutnya ya kotak biasa.
nah gimana kalau kita ingin membuat sudut lengkung, seperti gambar dibawah ini :
Nah lengkungan sudut dibagian kanan atas dan kiri bawah itu bisa kita buat dengan Fitur CSS 3 Rounded Corners.
Baik kita langsung coba membuat ya teman – teman, perhatikan skrip dibawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> #kotak1 { border-radius: 25px; border: 1px solid black; background: salmon; padding: 20px; width: 300px; height: 150px; margin-bottom:40px; } </style> </head> <body> <div id="kotak1">Ini adalah kotak 1</div> </body> </html> |
Semisal kita simpan dengan nama rounded-corner.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut :
Keterangan :
- Pada bagian kotak perhatikan untuk sudutnya telah menjadi melengkung kan ?? untuk bentuk lengkungannya tergantung nilai yang anda berikan di bagian property border-radius, semakin besar nilainya maka akan semakin lengkung, dan untuk satuannya adalah pixel.
Mengatur Setiap Bagian Lengkungan Sudut
Nah setelah anda mengetahui mengenai bagaimana cara untuk melengkungkan sudut dari box dengan menggunakan border-radius, kita akan belajar bagaimana kalau kita ingin menset lengkungan pada masing – masing sudut dengan nilai lengkungan yang berbeda.
Nah Contohnya seperti gambar diatas, sebelah kanan atas lebih lengkung dari pada kiri atas, nah mari kita belajar property baru untuk border-radius :
- border-top-left-radius (digunakan untuk mengatur sudut kiri atas)
- border-top-right-radius (digunakan untuk mengatur sudut kanan atas)
- border-bottom-right-radius (digunakan untuk mengatur sudut kanan bawah)
- border-bottom-left-radius (digunakan untuk mengatur sudut kiri bawah)
Setelah anda tahu bagaimana property yang digunakan, kita akan contohkan untuk skripnya :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> #kotak1 { border-top-left-radius:15px; border-top-right-radius:50px; border-bottom-left-radius:60px; border-bottom-right-radius:30px; border: 1px solid black; background: salmon; padding: 20px; width: 300px; height: 150px; margin-bottom:40px; } </style> </head> <body> <div id="kotak1">Ini adalah kotak 1</div> </body> </html> |
Semisal kita simpan dengan nama individual-border-corners.html, lalu kita akan buka di browser maka hasilnya adalah :
Keterangan :
- lengkungan sebelah kiri atas bernilai 15 pixel, karena kita memberikan border-top-left-radius:15px;
- lengkungan sebelah kanan atas bernilai 50 pixel, karena kita memberikan border-top-right-radius:50px;
- lengkungan sebelah kiri bawah bernilai 60 pixel, karena kita memberikan border-bottom-left-radius:60px;
- lengkungan sebelah kanan bawah bernilai 30 pixel, karena kita memberikan border-bottom-right-radius:30px;
Anda juga bisa menggunakan perintah individual border-corners dengan cara yang lebih sederhanya dengan cara seperti berikut ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> #kotak1 { border-radius:15px 50px 30px 60px; border: 1px solid black; background: salmon; padding: 20px; width: 300px; height: 150px; margin-bottom:40px; } </style> </head> <body> <div id="kotak1">Ini adalah kotak 1</div> </body> </html> |
Keterangan :
- Kita akan menggunakan border-radius dengan beberapa nilai sekaligus, untuk value pertama 15px (bagian kiri atas), value kedua 50px (bagian kanan atas), value ketiga 30px (bagian kanan bawah), value keempat 60px (bagian kiri bawah)
Setelah kita mempelajari mengenai perintah di border radius… berikutnya kita akan membahas mengenai browser yang mensupport dari perintah border-radius, perhatikan tabel dibawah ini :
| Property |  |
 |
 |
 |
 |
| Border-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
10.5 | 5.0 3.1 -webkit- |
Sumber : www.w3schools.com
Nah itu ada beberapa support browser untuk fitur border-radius dari CSS3, bisa disesuaikan dengan support browser ketika menggunakan fitur border-radius.
Baik sekian dulu teman – teman untuk pembahasan mengenai border radius didalam CSS 3, jika ada yang ingin ditambahkan bisa kita diskusikan di kolom komentar, sampai jumpa di tutorial CSS3 Selanjutnya.
Informasi ini sangat membantu.