Za pomocą właściwości border-radius oraz z góry zdefiniowanej grupy wartości możemy określić rozmiary zaokrąglenia kilku różnych rogów interesującego nas elementu HTML.
/* OBIE REGUŁY CSS SĄ SOBIE RÓWNOZNACZNE */
/* REGUŁA - 1 */
div {
border-radius:12px 14px 16px 18px /20px 22px 24px 26px;
}
/* REGUŁA - 2 */
div {
border-top-left-radius:12px 20px;
border-top-right-radius:14px 22px;
border-bottom-right-radius:16px 24px;
border-bottom-left-radius:18px 26px;
}
- top-left
-
Składnik top-left jest wymaganym składnikiem grupy wartości właściwości border-radius. Składnik top-left określa wartość właściwości border-top-left-radius, czyli rozmiar zaokrąglenia lewego górnego rogu interesującego nas elementu HTML.
- top-right
-
Składnik top-right jest wymaganym składnikiem grupy wartości właściwości border-radius. Składnik top-right określa wartość właściwości border-top-right-radius, czyli rozmiar zaokrąglenia prawego górnego rogu interesującego nas elementu HTML.
- bottom-right
-
Składnik bottom-right jest wymaganym składnikiem grupy wartości właściwości border-radius. Składnik bottom-right określa wartość właściwości border-bottom-right-radius, czyli rozmiar zaokrąglenia prawego dolnego rogu interesującego nas elementu HTML.
- bottom-left
-
Składnik bottom-left jest wymaganym składnikiem grupy wartości właściwości border-radius. Składnik bottom-left określa wartość właściwości border-bottom-left-radius, czyli rozmiar zaokrąglenia lewego dolnego rogu interesującego nas elementu HTML.
border-radius:12px /24px;
rozmiar zaokrąglenia w poziomie wszystkich rogów tego elementu "div" wynosi 12 pikseli, natomiast rozmiar zaokrąglenia w pionie wszystkich rogów tego elementu "div" wynosi 24 piksele, ponieważ do tego elementu "div" została dodana właściwość "border-radius" wraz z następującą grupą wartości: "12px /24px"
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
border-radius:12px /24px;
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
rozmiar zaokrąglenia w poziomie wszystkich rogów tego elementu "div" wynosi 12 pikseli, natomiast rozmiar zaokrąglenia w pionie wszystkich rogów tego elementu "div" wynosi 24 piksele, ponieważ do tego elementu "div" została dodana właściwość "border-radius" wraz z następującą grupą wartości: "12px /24px"
</div>
</body>
</html>
