Sifat border-radius

Sifat border-radius mencipta sudut bulat untuk sempadan dan latar belakang. Nilai sifat ialah sebarang unit untuk saiz. Nilai lalai: 0. Merupakan singkatan untuk sifat border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Sintaks

pemilih {
	border-radius: nilai;
}

Bilangan nilai

Sifat boleh menerima 1, 2, 3 atau 4 nilai, dinyatakan dengan jarak:

Bilangan	Keterangan
`1`	Untuk semua sudut serentak.
`2`	Nilai pertama menetapkan pembulatan untuk sudut kanan atas dan kiri bawah, kedua - untuk sudut kiri atas dan kanan bawah.
`3`	Nilai pertama menetapkan pembulatan untuk sudut kiri atas, kedua - serentak untuk sudut kanan atas dan kiri bawah, dan ketiga - untuk sudut kanan bawah.
`4`	Nilai pertama menetapkan pembulatan untuk sudut kiri atas, kedua - untuk sudut kanan atas, ketiga - untuk sudut kanan bawah, dan keempat - untuk sudut kiri bawah.

Pembulatan elips

Dua nilai melalui garis sendeng menetapkan pembulatan elips. Nilai sebelum garis sendeng menunjukkan pembulatan mendatar, dan nilai selepas garis sendeng - menegak:

pemilih {
	border-radius: mendatar / menegak;
}

Jika pembulatan untuk beberapa sudut ditetapkan, maka sebelum garis sendeng disenaraikan semua pembulatan mendatar, dan selepasnya - semua pembulatan menegak.

Contoh

Mari tetapkan 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 rupa pembulatan untuk sempadan berbentuk titik:

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

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

Contoh

Mari tetapkan pembulatan 10px untuk sudut satu pepenjuru, dan pembulatan 40px - untuk sudut pepenjuru kedua:

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

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

Contoh

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

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

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

Contoh

Mari tetapkan pembulatan berbeza 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 menetapkan 20px untuk bahagian mendatar pembulatan, dan 40px - untuk bahagian menegak:

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

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

Contoh

Sekarang mari tetapkan pembulatan elips berbeza untuk semua sudut secara berasingan:

<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 segi empat sama ditetapkan pembulatan, sama dengan separuh sisi segi empat sama, maka akan terhasil bulatan:

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

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

Contoh

Jika ditetapkan pembulatan, lebih besar daripada sisi segi empat sama, maka tetap akan terhasil bulatan:

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

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

Contoh

Bulatan juga boleh didapati, jika menetapkan border-radius kepada 50% (kelebihan ialah apabila menukar saiz segi empat sama tidak perlu menukar pembulatan):

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

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

Contoh

Jika menetapkan border-radius dalam peratus untuk segi empat tepat, maka akan terhasil pembulatan elips. Jika lebar ditetapkan dalam 400px, tinggi dalam 200px, dan border-radius dalam 10%, maka ini sama sahaja, seperti jika ditulis 40px/20px:

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

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

Contoh

Mari tetapkan nilai border-radius kepada 50% untuk segi empat tepat - akan terhasil elips:

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

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

Contoh

Sifat border-radius membulatkan bukan sahaja sudut sempadan, tetapi juga latar belakang:

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

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

Lihat juga

sifat border,
yang merupakan sifat-singkatan untuk sempadan