Contoh
Menambahkan perbatasan bulat ke <div> elemen:
div
{
border: 2px solid;
border-radius: 25px;
}
Cobalah sendiri " Definisi dan Penggunaan
Properti border-radius adalah properti singkat untuk setting empat perbatasan - * - sifat radius.
Tip: Properti ini memungkinkan Anda untuk menambahkan perbatasan bulat untuk elemen!
| nilai default: | 0 |
|---|---|
| mewarisi: | no |
| animatable: | yes. Read about animatable Try it |
| Versi: | CSS3 |
| sintaks JavaScript: | object .style.borderRadius="25px" Try it |
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Nomor diikuti oleh -webkit- atau moz menentukan versi pertama yang bekerja dengan awalan.
| Milik | |||||
|---|---|---|---|---|---|
| border-radius | 5.0 4.0 -webkit- | 9.0 | 4.0 3.0 moz | 5.0 3.1 -webkit- | 10.5 |
CSS Syntax
border-radius:1-4 length|%/1-4 length|%|initial|inherit;Note: Empat nilai untuk setiap jari-jari yang diberikan dalam urutan top-kiri, kanan atas, kanan bawah, kiri bawah. Jika kiri bawah dihilangkan itu adalah sama dengan kanan atas. Jika kanan bawah dihilangkan itu adalah sama dengan top-kiri. Jika bagian kanan dihilangkan itu adalah sama dengan top-kiri.
Nilai properti
| Nilai | Deskripsi | Mainkan |
|---|---|---|
| length | Mendefinisikan bentuk sudut. Nilai default adalah 0 | Mainkan " |
| % | Mendefinisikan bentuk dari sudut dalam% | Mainkan " |
| initial | Set properti ini ke nilai default. Baca tentang awal | Mainkan " |
| inherit | Mewarisi properti ini dari elemen induknya. Baca tentang mewarisi |
contoh 1
border-radius:2em;
is equivalent to:
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
contoh 2
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;
Pages terkait
CSS3 tutorial: CSS3 Borders
Referensi HTML DOM: borderRadius property