Properti radius perbatasan-kanan-bawah CSS
Contoh
Tambahkan batas bulat ke sudut kanan bawah dari dua elemen <div>:
#example1 {
border: 2px solid red;
border-bottom-right-radius: 25px;
}
#example2 {
border: 2px solid red;
border-bottom-right-radius: 50px
20px;
}
Lebih banyak contoh "Coba Sendiri" di bawah ini.
Definisi dan Penggunaan
Properti border-bottom-right-radius
mendefinisikan radius sudut kanan bawah.
Tip: Properti ini memungkinkan Anda untuk menambahkan batas bulat ke elemen!
Nilai bawaan: | 0 |
---|---|
Diwarisi: | tidak |
Animasi: | Ya. Baca tentang animasi |
Versi: kapan: | CSS3 |
Sintaks JavaScript: | objek .style.borderBottomRightRadius="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-bottom-right-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
Sintaks CSS
border-bottom-right-radius: length|% [length|%]|initial|inherit;
Catatan: Jika Anda menetapkan dua nilai, yang pertama adalah untuk batas bawah, dan yang kedua untuk batas kanan. Jika nilai kedua dihilangkan, itu disalin dari yang pertama. Jika salah satu panjangnya nol, sudutnya persegi, tidak bulat.
Nilai properti
Value | Description | Play it |
---|---|---|
length | Defines the shape of the bottom-right corner. Default value is 0. Read about length units | |
% | Defines the shape of the bottom-right corner 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
Tambahkan batas bulat ke sudut kanan bawah dalam persen:
#example1 {
border: 2px solid red;
background: url(paper.gif);
padding: 10px;
border-bottom-right-radius: 40%;
}
Halaman Terkait
Tutorial CSS: Sudut Bulat CSS
Referensi DOM HTML: properti borderBottomRightRadius