Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar CSS Bagian 18 : Cara Menggunakan Media Types di CSS. Selanjutnya, kita akan mempelajari cara membuat rounded corners di CSS.
CSS3 Rounded corners digunakan untuk menambahkan sudut berwarna khusus ke body atau teks dengan menggunakan properti border-radius.
Sintaks sederhana dari rounded corners adalah sebagai berikut :
#rcorners7 {
border-radius: 60px/15px;
background: #FF0000;
padding: 20px;
width: 200px;
height: 150px;
}
Tabel berikut menunjukkan nilai yang mungkin untuk Sudut membulat sebagai berikut :
| No. | Nilai & Deskripsi |
| 1 | border-radius Elemen ini digunakan untuk mengatur 4 properti radius border |
| 2 | border-top-left-radius Elemen ini digunakan untuk mengatur border pojok kiri atas |
| 3 | border-top-right-radius Elemen ini digunakan untuk mengatur border pojok kanan atas |
| 4 | border-bottom-right-radius Elemen ini digunakan untuk mengatur border di pojok kanan bawah |
| 5 | border-bottom-left-radius Elemen ini digunakan untuk mengatur border sudut kiri bawah |
Properti ini dapat memiliki 3 nilai. Contoh berikut menggunakan kedua nilai tersebut :
<html>
<head>
<style>
#rcorners1 {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(https://mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p id = "rcorners1">Rounded corners!</p>
<p id = "rcorners2">Rounded corners!</p>
<p id = "rcorners3">Rounded corners!</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Properti sudut pada corner
Kita dapat menentukan properti setiap sudut seperti yang ditunjukkan di bawah ini :
<html>
<head>
<style>
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
#rcorners2 {
border-radius: 15px 50px 30px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<p id = "rcorners1"></p>
<p id = "rcorners2"></p>
<p id = "rcorners3"></p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Semoga tutorial ini membantu Anda untuk mempelajari cara menggunakan rounded corners di CSS.
