Properti radius perbatasan-bawah-kiri- CSS
Contoh
Tambahkan batas bulat ke sudut kiri bawah dua elemen <div>:
#example1 {
border: 2px solid red;
border-bottom-left-radius: 25px;
}
#example2 {
border: 2px solid red;
border-bottom-left-radius: 50px
20px;
}
Lebih banyak contoh "Coba Sendiri" di bawah ini.
Definisi dan Penggunaan
Properti border-bottom-left-radius
mendefinisikan radius sudut kiri 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.borderBottomLeftRadius="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-left-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
Sintaks CSS
border-bottom-left-radius: length|% [length|%]|initial|inherit;
Catatan: Jika Anda menetapkan dua nilai, yang pertama adalah untuk batas bawah, dan yang kedua untuk batas kiri. 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-left corner. Default value is 0. Read about length units | |
% | Defines the shape of the bottom-left 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 kiri bawah dalam persen:
#example1 {
border: 2px solid red;
background: url(paper.gif);
padding: 10px;
border-bottom-left-radius: 40%;
}
Halaman Terkait
Tutorial CSS: Sudut Bulat CSS
Referensi DOM HTML: properti borderBottomLeftRadius