Dengan properti CSS border-radius, kita bisa memberikan elemen “rounded corners”.
Section Artikel
Properti CSS border-radius
Properti CSS border-radius mendefinisikan radius sudut elemen.
Tip: Properti ini bisa membuat sudut membulat ke elemen!
Contoh :
<!DOCTYPE html> <html> <head> <style> #rcorners1 { border-radius: 25px; background: #73AD21; padding: 20px; width: 200px; height: 150px; } #rcorners2 { border-radius: 25px; border: 2px solid #73AD21; padding: 20px; width: 200px; height: 150px; } #rcorners3 { border-radius: 25px; background: url(paper.gif); background-position: left top; background-repeat: repeat; padding: 20px; width: 200px; height: 150px; } </style> </head> <body> <h1>Properti border-radius</h1> <p>Sudut membulat untuk elemen dengan warna latar yang ditentukan:</p> <p id="rcorners1">Rounded corners!</p> <p>Sudut membulat untuk elemen dengan border:</p> <p id="rcorners2">Rounded corners!</p> <p>Sudut membulat untuk elemen dengan gambar latar belakang:</p> <p id="rcorners3">Rounded corners!</p> </body> </html>
Catatan: Properti border-radius sebenarnya adalah properti singkatan untuk properti border-top-left-radius, border-top-right-radius, border-bottom-right-radius, dan border-bottom-left-radius.
CSS border-radius – Menentukan sudut
Properti border-radius dapat memiliki empat nilai aturan. Berikut aturannya:
- Empat nilai – radius-batas: 15px 50px 30px 5px; (nilai pertama berlaku untuk sudut kiri atas, nilai kedua untuk sudut kanan atas, nilai ketiga untuk sudut kanan bawah, dan nilai keempat untuk sudut kiri bawah):
- Tiga nilai – radius-batas: 15px 50px 30px; (nilai pertama berlaku untuk pojok kiri atas, nilai kedua berlaku untuk pojok kanan atas dan pojok kiri bawah, dan nilai ketiga berlaku untuk pojok kanan bawah):
- Dua nilai – radius-batas: 15px 50px; (nilai pertama berlaku untuk sudut kiri atas dan kanan bawah, dan nilai kedua berlaku untuk sudut kanan atas dan kiri bawah):
- Satu nilai – radius-batas: 15px; (nilai berlaku untuk keempat sudut, yang dibulatkan sama
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners4 {
border-radius: 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h1>The border-radius Property</h1>
<p>Empat Nilai - border-radius: 15px 50px 30px 5px:</p>
<p id="rcorners1"></p>
<p>Tiga Nilai - border-radius: 15px 50px 30px:</p>
<p id="rcorners2"></p>
<p>Dua Nilai - border-radius: 15px 50px:</p>
<p id="rcorners3"></p>
<p>Satu Nilai - border-radius: 15px:</p>
<p id="rcorners4"></p>
</body>
</html>
Contoh sudut elips:
<!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
border-radius: 50px / 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px / 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h1>The border-radius Property</h1>
<p>Elliptical border - border-radius: 50px / 15px:</p>
<p id="rcorners1"></p>
<p>Elliptical border - border-radius: 15px / 50px:</p>
<p id="rcorners2"></p>
<p>Ellipse border - border-radius: 50%:</p>
<p id="rcorners3"></p>
</body>
</html>
Properti Rounded Corners di CSS
| Property | Description |
|---|---|
| border-radius | Properti singkatan untuk menyetel keempat properti border – * – * – radius |
| border-top-left-radius | Mendefinisikan bentuk border sudut kiri atas |
| border-top-right-radius | Mendefinisikan bentuk border sudut kanan atas |
| border-bottom-right-radius | Mendefinisikan bentuk border sudut kanan bawah |
| border-bottom-left-radius | Mendefinisikan bentuk border sudut kiri bawah |
