Pada tutorial sebelumnya, kita sudah mempelajari tentang Tutorial Belajar CSS Bagian 31 : Cara Menggunakan Attribute Selector di CSS. Pada tutorial kali ini, kita akan mempelajari tentang penggunaan properti border radius di CSS.
Properti CSS border-radius memiliki fungsi untuk mengatur batas bulat dan menyediakan sudut bulat di sekitar elemen, tag, atau div. Property ini mendefinisikan radius sudut elemen.
Property ini memiliki shorthand sebagai berikut : border top-left-radius, border-top-right-radius, border-bottom-right-radius dan border-bottom-left-radius.
Property ini memberikan bentuk bulat ke sudut perbatasan elemen. Kita dapat menentukan batas untuk keempat sudut kotak dalam satu deklarasi menggunakan border-radius. Nilai properti ini dapat ditentukan dalam satuan persentase atau panjang.
Properti CSS ini mencakup properti sebagai berikut:
Deskripsi properti
- border-top-left-radius : Digunakan untuk mengatur border-radius untuk pojok kiri atas
- border-top-right-radius : Digunakan untuk mengatur border-radius untuk pojok kanan atas
- border-bottom-right-radius : Digunakan untuk mengatur border-radius sudut kanan bawah
- border-bottom-left-radius : Digunakan untuk mengatur border-radius untuk pojok kiri bawah
Jika nilai bottom-left dihilangkan, maka akan sama dengan top-right. Jika nilai bottom-right dihilangkan, maka akan sama dengan top-left. Begitu pula jika top-right, maka akan sama dengan top-left.
Mari kita lihat apa yang terjadi jika kita memberikan satu nilai, dua nilai, tiga nilai, dan empat nilai ke properti ini.
- Jika kami memberikan satu nilai (seperti border-radius: 30px;) ke properti ini, maka property akan mengatur semua sudut ke nilai yang sama.
- Jika kita menentukan dua nilai (seperti border-radius: 20% 10% ;), maka nilai pertama akan digunakan untuk sudut kiri atas dan kanan bawah, dan nilai kedua akan digunakan untuk sudut kanan atas dan sudut kiri bawah.
- Jika kita menggunakan tiga nilai (seperti border-radius: 10% 30% 20%;) maka nilai pertama akan digunakan untuk pojok kiri atas, nilai kedua akan diterapkan di pojok kanan atas, dan pojok kiri bawah dan nilai ketiga akan diterapkan ke pojok kanan bawah.
- Demikian pula, ketika properti ini memiliki empat nilai (border-radius: 10% 30% 20% 40%;) maka nilai pertama akan menjadi radius kiri atas, nilai kedua akan digunakan untuk kanan atas, yang ketiga nilai akan diterapkan di kanan bawah, dan nilai keempat digunakan untuk kiri bawah.
Sintaksis
Nilai Properti
- Length : Ini mendefinisikan bentuk sudut. Ini menunjukkan ukuran jari-jari menggunakan nilai. Nilai standarnya adalah 0. Tidak diizinkan menggunakan nilai negatif.
- Persentase: Ini menunjukkan ukuran jari-jari dalam persentase. Tidak diijinkan menggunakan nilai negatif.
Contoh penggunaan properti border-radius :
<!DOCTYPE html>
<html>
<head>
<title> CSS border-radius </title>
<style>
div {
padding: 50px;
margin: 20px;
border: 6px ridge red;
width: 300px;
float: left;
height: 150px;
}
p{
font-size: 25px;
}
#satu {
border-radius: 90px;
background: lightgreen;
}
#dua {
border-radius: 25% 10%;
background: orange;
}
#tiga {
border-radius: 35px 10em 10%;
background: cyan;
}
#empat {
border-radius: 50px 50% 50cm 50em;
background: lightblue;
}
</style>
</head>
<body>
<div id = "satu">
<h2> Selamat datang ke Mbah WP </h2>
<p> border-radius: 90px; </p>
</div>
<div id = "dua">
<h2> Selamat datang ke Mbah WP </h2>
<p> border-radius: 25% 10%; </p>
</div>
<div id = "tiga">
<h2> Selamat datang ke Mbah WP </h2>
<p> border-radius: 35px 10em 10%; </p>
</div>
<div id = "empat">
<h2> Selamat datang ke Mbah WP </h2>
<p>border-radius: 50px 50% 50cm 50em;</p>
</div>
</body>
</html>Hasil dari kode di atas adalah :
Sekarang, mari kita lihat border-radius untuk sudut tertentu.
Contoh- border-top-left-radius
Ini mengatur radius perbatasan untuk sudut kiri atas.
<!DOCTYPE html>
<html>
<head>
<title> CSS border-radius </title>
<style>
#border {
border-top-left-radius: 250px;
background: lightgreen;
padding: 50px;
border: 6px ridge red;
width: 300px;
height: 200px;
font-size: 25px;
}
</style>
</head>
<body>
<center>
<div id = "border">
<h2> Selamat datang ke Mbah WP </h2>
<p>border-top-left-radius: 250px;</p>
</div>
</center>
</body>
</html>Hasil dari kode di atas adalah :
Contoh- border-top-right-radius
Ini mengatur border-radius untuk sudut kanan atas.
<!DOCTYPE html>
<html>
<head>
<style>
#border {
border-top-right-radius: 50%;
background: lightgreen;
padding: 50px;
border: 6px ridge red;
width: 300px;
height: 200px;
font-size: 25px;
}
</style>
</head>
<body>
<center>
<div id = "border">
<h2> Selamat datang ke Mbah WP </h2>
<p>border-top-right-radius: 50%;</p>
</div>
</center>
</body>
</html>Hasil dari kode di atas adalah :
Contoh : border-bottom-left-radius
Ini mengatur border-radius untuk sudut kiri bawah.
<!DOCTYPE html>
<html>
<head>
<style>
#border {
border-bottom-left-radius: 50%;
background: lightgreen;
padding: 50px;
border: 6px ridge red;
width: 300px;
height: 200px;
font-size: 25px;
}
</style>
</head>
<body>
<center>
<div id = "border">
<h2> Selamat datang ke Mbah WP </h2>
<p>border-bottom-left-radius: 50%;</p>
</div>
</center>
</body>
</html>Hasil :
Kita dapat menentukan nilai horizontal dan vertikal yang terpisah dengan menggunakan simbol garis miring (/). Nilai sebelum garis miring (/) digunakan untuk radius horizontal dan nilai setelah garis miring (/) untuk radius vertikal.
Contoh berikut ini menggunakan simbol garis miring (/).
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
div{
padding: 50px;
border: 6px ridge red;
width: 300px;
margin: 20px;
font-weight: bold;
height: 175px;
float: left;
font-size: 25px;
}
#satu {
border-radius: 10% / 50%;
background: lightgreen;
}
#dua {
border-radius: 120px / 100px 10px;
background: lightblue;
}
#tiga {
border-radius: 50% 10em / 10% 20em;
background: lightpink;
}
#empat {
border-radius: 100px 10em 120px / 30%;
background: cyan;
}
</style>
</head>
<body>
<center>
<div id = "satu">
<h2>Selamat datang ke Mbah WP</h2>
<p>border-radius: 10% / 50%; </p>
</div>
<div id = "dua">
<h2>Selamat datang ke Mbah WP</h2>
<p>border-radius: 120px / 100px 10px; </p>
</div>
<div id = "tiga">
<h2> Selamat datang ke Mbah WP </h2>
<p>border-radius: 50% 10em / 10% 20em; </p>
</div>
<div id = "empat">
<h2> Selamat datang ke Mbah WP </h2>
<p>border-radius: 100px 10em 120px / 30%; </p>
</div>
</center>
</body>
</html>Hasil :
Itu dia penjelasan tentang cara menggunakan menggunakan property border-radius di CSS. Semoga artikel ini bisamembantu Anda dalam mempelajari CSS.
