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