Atribut border-radius CSS

Definisi dan penggunaan

Atribut border-radius adalah atribut singkat yang digunakan untuk mengatur empat atribut border-*-radius.

Tips:Atribut ini memungkinkan Anda menambahkan border rounded ke elemen.

Lihat pula:

Pelajaran CSS3:BORDER Dalam CSS3

Contoh

Tambahkan border rounded ke elemen div:

div
{
border:2px solid;
border-radius:25px;
}

Coba sendiri

Ada banyak contoh lain di bawah halaman.

Sintaksis CSS

border-radius: 1-4 length|% / 1-4 length|%;

Keterangan:Atur empat nilai untuk setiap radii dalam urutan ini. Jika bottom-left diabaikan, akan sama dengan top-right. Jika bottom-right diabaikan, akan sama dengan top-left. Jika top-right diabaikan, akan sama dengan top-left.

Nilai atribut

Nilai Deskripsi Pengujian
length Definisi bentuk lingkar sudut. Pengujian
% Definisi bentuk lingkar sudut dalam persen. Pengujian

Contoh 1

border-radius:2em;

Sama dengan:

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

Contoh 2

border-radius: 2em 1em 4em / 0.5em 3em;

Sama dengan:

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

Detil teknis

Nilai default: 0
Inheritance: no
Versi: CSS3
Sintaksis JavaScript: object.style.borderRadius="5px"

Dukungan browser

Angka di tabel menunjukkan versi browser pertama yang mendukung atribut ini penuh.

Chrome IE / Edge Firefox Safari Opera
5.0
4.0 -webkit-		 9.0 4.0
3.0 -moz-		 5.0
3.1 -webkit-		 10.5