Contoh
Menambahkan perbatasan bulat ke sudut kiri atas dari <div> elemen:
div
{
border: 2px solid;
border-top-left-radius: 2em;
}
Cobalah sendiri " Definisi dan Penggunaan
Properti border-top-kiri-radius mendefinisikan bentuk perbatasan pojok kiri.
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.borderTopLeftRadius="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-top-left-radius | 5.0 4.0 -webkit- | 9.0 | 4.0 3.0 moz | 5.0 3.1 -webkit- | 10.5 |
CSS Syntax
border-top-left-radius:length|%[length|%]|initial|inherit;Note: Dua panjang atau persentase nilai dari sifat border-top-kiri-radius menentukan jari-jari elips kuartal yang mendefinisikan bentuk sudut tepi batas luar. Nilai pertama adalah radius horisontal, kedua jari-jari vertikal. Jika nilai kedua dihilangkan itu disalin dari yang pertama. Jika salah satu panjang adalah nol, sudut adalah persegi, tidak bulat. Persentase untuk radius horisontal mengacu pada lebar kotak perbatasan, sedangkan persentase untuk radius vertikal mengacu pada ketinggian kotak perbatasan.
Nilai properti
| Nilai | Deskripsi | Mainkan |
|---|---|---|
| length | Mendefinisikan bentuk dari pojok kiri | Mainkan " |
| % | Mendefinisikan bentuk dari pojok kiri di% | Mainkan " |
| initial | Set properti ini ke nilai default. Baca tentang awal | Mainkan " |
| inherit | Mewarisi properti ini dari elemen induknya. Baca tentang mewarisi |
Pages terkait
CSS3 tutorial: CSS3 Borders
Referensi HTML DOM: borderTopLeftRadius property