Properti radius perbatasan CSS
Contoh
Tambahkan sudut membulat ke dua elemen <div>:
#example1 {
border: 2px solid red;
border-radius: 25px;
}
#example2 {
border: 2px solid red;
border-radius: 50px
20px;
}
Lebih banyak contoh "Coba Sendiri" di bawah ini.
Definisi dan Penggunaan
Properti border-radiusmendefinisikan radius sudut elemen.
Tip: Properti ini memungkinkan Anda untuk menambahkan sudut membulat ke elemen!
Properti ini dapat memiliki satu hingga empat nilai. Berikut aturannya:
Empat nilai - radius batas: 15px 50px 30px 5px; (nilai pertama berlaku untuk sudut kiri atas, nilai kedua berlaku untuk sudut kanan atas, nilai ketiga berlaku untuk sudut kanan bawah, dan nilai keempat berlaku untuk sudut kiri bawah):
Tiga nilai - radius batas: 15px 50px 30px; (nilai pertama berlaku untuk sudut kiri atas, nilai kedua berlaku untuk sudut kanan atas dan kiri bawah, dan nilai ketiga berlaku untuk sudut 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:
| Nilai bawaan: | 0 |
|---|---|
| Diwarisi: | tidak |
| Animasi: | Ya. Baca tentang animasi |
| Versi: kapan: | CSS3 |
| Sintaks JavaScript: | objek .style.borderRadius="25px" |
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Angka yang diikuti oleh -webkit- atau -moz- menentukan versi pertama yang berfungsi dengan awalan.
| Property | |||||
|---|---|---|---|---|---|
| border-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
Sintaks CSS
border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;
Catatan: Empat nilai untuk setiap radius diberikan dalam urutan kiri atas, kanan atas, kanan bawah, kiri bawah. Jika kiri bawah dihilangkan sama dengan kanan atas. Jika kanan bawah dihilangkan sama dengan kiri atas. Jika kanan atas dihilangkan sama dengan kiri atas.
Nilai properti
| Value | Description | Play it |
|---|---|---|
| length | Defines the shape of the corners. Default value is 0. Read about length units | |
| % | Defines the shape of the corners in % | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Lebih Banyak Contoh
Contoh
Atur sudut membulat untuk elemen dengan warna latar belakang:
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
Contoh
Atur sudut membulat untuk elemen dengan batas:
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
Contoh
Atur sudut membulat untuk elemen dengan gambar latar belakang:
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
Contoh
Perhatikan juga ini:
#example1 {
border-radius: 2em / 5em;
}
/* is equivalent to:
border-top-left-radius: 2em 5em;
border-top-right-radius: 2em 5em;
border-bottom-right-radius: 2em 5em;
border-bottom-left-radius: 2em 5em; */
#example2 {
border-radius: 2em 1em 4em / 0.5em 3em;
}
/* is equivalent to:
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em; */
Halaman Terkait
Tutorial CSS: Sudut Bulat CSS
Referensi DOM HTML: properti borderRadius