Properti border-radius

Properti border-radius membuat sudut melengkung untuk border dan latar belakang. Nilai properti adalah satuan ukuran apa pun. Nilai default: 0. Merupakan singkatan untuk properti border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Sintaks

selektor {
	border-radius: nilai;
}

Jumlah Nilai

Properti dapat menerima 1, 2, 3 atau 4 nilai, yang ditentukan dengan spasi:

Jumlah	Deskripsi
`1`	Untuk semua sudut secara bersamaan.
`2`	Nilai pertama menentukan pembulatan untuk sudut kanan atas dan kiri bawah, nilai kedua - untuk sudut kiri atas dan kanan bawah.
`3`	Nilai pertama menentukan pembulatan untuk sudut kiri atas, nilai kedua - secara bersamaan untuk sudut kanan atas dan kiri bawah, dan nilai ketiga - untuk sudut kanan bawah.
`4`	Nilai pertama menentukan pembulatan untuk sudut kiri atas, nilai kedua - untuk sudut kanan atas, nilai ketiga - untuk sudut kanan bawah, dan nilai keempat - untuk sudut kiri bawah.

Pembulatan Elips

Dua nilai yang dipisahkan garis miring menentukan pembulatan elips. Nilai sebelum garis miring menunjukkan pembulatan horizontal, dan nilai setelah garis miring - pembulatan vertikal:

selektor {
	border-radius: horizontal / vertikal;
}

Jika pembulatan ditentukan untuk beberapa sudut, maka sebelum garis miring dicantumkan semua pembulatan horizontal, dan setelahnya - semua pembulatan vertikal.

Contoh

Mari atur pembulatan 10px untuk semua sudut:

<div id="elem"></div>

#elem {
	border-radius: 10px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

Contoh

Mari lihat bagaimana pembulatan untuk border berbentuk titik terlihat:

<div id="elem"></div>

#elem {
	border-radius: 10px;
	border: 1px dotted black;
	width: 300px;
	height: 100px;
}

Contoh

Mari atur pembulatan 10px untuk sudut satu diagonal, dan pembulatan 40px - untuk sudut diagonal kedua:

<div id="elem"></div>

#elem {
	border-radius: 10px 40px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

Contoh

Mari atur pembulatan 10px untuk sudut kiri atas, pembulatan 30px untuk sudut kanan bawah, dan pembulatan 50px - untuk sudut diagonal kedua:

<div id="elem"></div>

#elem {
	border-radius: 10px 50px 30px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

Contoh

Mari atur pembulatan yang berbeda untuk setiap sudut:

<div id="elem"></div>

#elem {
	border-radius: 10px 30px 50px 70px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

Contoh

Mari buat pembulatan elips, dengan mengatur 20px untuk bagian pembulatan horizontal, dan 40px - untuk bagian vertikal:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	border-radius: 20px / 40px;
	width: 300px;
	height: 100px;
}

Contoh

Sekarang mari atur pembulatan elips yang berbeda untuk semua sudut secara terpisah:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	border-radius: 20px 30px 20px 30px / 40px 60px 40px 60px;
	width: 300px;
	height: 100px;
}

Contoh

Jika untuk blok persegi diberikan pembulatan, yang sama dengan setengah sisi persegi, maka akan dihasilkan lingkaran:

<div id="elem"></div>

#elem {
	border-radius: 100px;
	border: 1px solid black;
	width: 200px;
	height: 200px;
}

Contoh

Jika diberikan pembulatan yang lebih besar dari sisi persegi, maka tetap akan dihasilkan lingkaran:

<div id="elem"></div>

#elem {
	border-radius: 200px;
	border: 1px solid black;
	width: 200px;
	height: 200px;
}

Contoh

Lingkaran juga bisa didapatkan, jika mengatur border-radius ke 50% (keuntungannya adalah ketika mengubah ukuran persegi tidak perlu mengubah pembulatan):

<div id="elem"></div>

#elem {
	border: 1px solid black;
	border-radius: 50%;
	width: 200px;
	height: 200px;
}

Contoh

Jika mengatur border-radius dalam persentase untuk persegi panjang, maka akan dihasilkan pembulatan elips. Jika lebar ditetapkan 400px, tinggi 200px, dan border-radius 10%, maka ini sama saja, seperti jika ditulis 40px/20px:

<div id="elem"></div>

#elem {
	border-radius: 10%;
	border: 1px solid black;
	width: 400px;
	height: 200px;
}

Contoh

Mari atur nilai border-radius ke 50% untuk persegi panjang - akan dihasilkan elips:

<div id="elem"></div>

#elem {
	border-radius: 50%;
	border: 1px solid black;
	width: 400px;
	height: 200px;
}

Contoh

Properti border-radius tidak hanya membulatkan sudut border, tetapi juga latar belakang:

<div id="elem"></div>

#elem {
	border-radius: 20px;
	width: 300px;
	height: 100px;
	background-color: #e4f1ed;
}

Lihat Juga

properti border,
yang merupakan properti singkatan untuk border