Właściwość border-radius

Właściwość border-radius tworzy zaokrąglone rogi dla obramowania i tła. Wartością właściwości są dowolne jednostki wymiarów. Wartość domyślna: 0. Jest skrótem dla właściwości border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Składnia

selektor {
	border-radius: wartość;
}

Liczba wartości

Właściwość może przyjmować 1, 2, 3 lub 4 wartości, podawanych poprzez spację:

Liczba	Opis
`1`	Dla wszystkich rogów jednocześnie.
`2`	Pierwsza wartość ustawia zaokrąglenie dla górnego prawego i dolnego lewego rogu, druga - dla górnego lewego i dolnego prawego.
`3`	Pierwsza wartość ustawia zaokrąglenie dla górnego lewego rogu, druga - jednocześnie dla górnego prawego i dolnego lewego, a trzecia - dla dolnego prawego rogu.
`4`	Pierwsza wartość ustawia zaokrąglenie dla górnego lewego rogu, druga - dla górnego prawego, trzecia - dla dolnego prawego rogu, a czwarta - dla dolnego lewego rogu.

Zaokrąglenie eliptyczne

Dwie wartości poprzez ukośnik ustawiają eliptyczne zaokrąglenie. Wartość przed ukośnikiem wskazuje zaokrąglenie poziome, a wartości po ukośniku - pionowe:

selektor {
	border-style: poziome / pionowe;
}

Jeśli ustawiane są zaokrąglenia dla kilku rogów, to przed ukośnikiem wymieniane są wszystkie poziome zaokrąglenia, a po nim - wszystkie pionowe.

Przykład

Ustawmy zaokrąglenie 10px dla wszystkich rogów:

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

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

Przykład

Spójrzmy, jak wyglądają zaokrąglenia dla obramowania w postaci kropek:

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

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

Przykład

Ustawmy zaokrąglenie w 10px dla rogów jednej przekątnej, i zaokrąglenia w 40px - dla rogów drugiej przekątnej:

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

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

Przykład

Ustawmy zaokrąglenie w 10px dla górnego lewego rogu, zaokrąglenie w 30px dla dolnego prawego rogu, i zaokrąglenia w 50px - dla rogów drugiej przekątnej:

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

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

Przykład

Ustawmy różne zaokrąglenia dla każdego z rogów:

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

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

Przykład

Zróbmy eliptyczne zaokrąglenie, ustawiając 20px dla poziomej części zaokrąglenia, a 40px - dla pionowej:

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

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

Przykład

A teraz ustawmy różne eliptyczne zaokrąglenie dla wszystkich rogów osobno:

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

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

Przykład

Jeśli dla kwadratowego bloku ustawić zaokrąglenia, równe połowie boku kwadratu, to otrzymamy koło:

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

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

Przykład

Jeśli ustawić zaokrąglenie, większe niż bok kwadratu, to i tak otrzymamy koło:

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

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

Przykład

Koło można również otrzymać, jeśli ustawić border-radius na 50% (zaleta w tym, że przy zmianie wymiarów kwadratu nie trzeba zmieniać zaokrąglenia):

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

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

Przykład

Jeśli ustawić border-radius w procentach dla prostokąta, to otrzymamy eliptyczne zaokrąglenie. Jeśli szerokość jest ustawiona na 400px, wysokość na 200px, a border-radius na 10%, to jest to tak, jak by było napisane 40px/20px:

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

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

Przykład

Ustawmy wartość border-radius na 50% dla prostokąta - otrzymamy elipsę:

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

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

Przykład

Właściwość border-radius zaokrągla nie tylko rogówki obramowania, ale i tła:

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

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

Zobacz też

właściwość border,
która jest właściwością-skrótem dla obramowania