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