A border-radius tulajdonság

A border-radius tulajdonság lekerekített sarkokat hoz létre a keret és a háttér számára. A tulajdonság értéke bármely mértékegység méretekhez lehet. Alapértelmezett érték: 0. Rövidítése a következő tulajdonságoknak: border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Szintaxis

szelektor {
	border-radius: érték;
}

Értékek száma

A tulajdonság 1, 2, 3 vagy 4 értéket fogadhat el, szóközzel elválasztva:

Szám	Leírás
`1`	Minden sarokra egyszerre.
`2`	Az első érték a jobb felső és a bal alsó sarok lekerekítését határozza meg, a második pedig a bal felső és a jobb alsó sarokét.
`3`	Az első érték a bal felső sarok lekerekítését határozza meg, a második - egyidejűleg a jobb felső és a bal alsó sarokét, a harmadik pedig a jobb alsó sarokét.
`4`	Az első érték a bal felső sarok lekerekítését határozza meg, a második - a jobb felső sarokét, a harmadik - a jobb alsó sarokét, a negyedik pedig a bal alsó sarokét.

Elliptikus lekerekítés

Két érték perjellel elválasztva elliptikus lekerekítést állít be. A perjel előtti érték a vízszintes lekerekítést, a perjel utáni érték pedig a függőleges lekerekítést határozza meg:

szelektor {
	border-style: vízszintes / függőleges;
}

Ha több sarok lekerekítését határozzuk meg, akkor a perjel előtt az összes vízszintes lekerekítés, utána pedig az összes függőleges lekerekítés szerepel.

Példa

Állítsunk be 10px lekerekítést minden sarokra:

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

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

Példa

Nézzük meg, hogyan néz ki a lekerekítés pontozott keret esetén:

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

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

Példa

Állítsunk be 10px lekerekítést az egyik átló sarkaira, és 40px lekerekítést - a második átló sarkaira:

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

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

Példa

Állítsunk be 10px lekerekítést a bal felső sarokra, 30px lekerekítést a jobb alsó sarokra, és 50px lekerekítést a második átló sarkaira:

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

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

Példa

Állítsunk be különböző lekerekítéseket minden egyes sarokra:

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

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

Példa

Készítsünk elliptikus lekerekítést, beállítva 20px a vízszintes részre, és 40px a függőleges részre:

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

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

Példa

Most állítsunk be különböző elliptikus lekerekítést minden egyes sarokra:

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

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

Példa

Ha egy négyzet alakú blokk esetén a lekerekítést a négyzet oldalának felére állítjuk, akkor kört kapunk:

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

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

Példa

Ha a lekerekítést a négyzet oldalánál nagyobbra állítjuk, akkor is kört kapunk:

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

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

Példa

Kört akkor is kaphatunk, ha a border-radius értékét 50%-ra állítjuk (az előny az, hogy a négyzet méretének megváltoztatásakor nem kell módosítani a lekerekítést):

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

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

Példa

Ha a border-radius értékét százalékban adjuk meg egy téglalap esetén, akkor elliptikus lekerekítést kapunk. Ha a szélesség 400px, a magasság 200px, és a border-radius 10%, akkor ez ugyanaz, mintha 40px/20px lenne megadva:

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

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

Példa

Állítsuk a border-radius értékét 50%-ra egy téglalap esetén - ellipszist kapunk:

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

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

Példa

A border-radius tulajdonság nem csak a keret sarkait kerekíti le, hanem a háttérét is:

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

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

Lásd még

a border tulajdonság,
amely a keret rövidített tulajdonsága