Vetija border-radius

Vetija border-radius krijon qoshe të rrumbullakosura për kufirin dhe sfondin. Vlera e vetisë janë çdo njësi për madhësi. Vlera e parazgjedhur: 0. Është shkurtim për vetitë border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Sintaksë

përzgjedhor {
	border-radius: vlerë;
}

Numri i vlerave

Vetia mund të marrë 1, 2, 3 ose 4 vlera, të specifikuara nëpërmjet hapësirës:

Numër	Përshkrim
`1`	Për të gjitha qoshet njëkohësisht.
`2`	Vlera e parë vendos rrumbullakimin për këndin e sipërm të djathtë dhe të poshtëm të majtë, e dyta - për këndin e sipërm të majtë dhe të poshtëm të djathtë.
`3`	Vlera e parë vendos rrumbullakimin për këndin e sipërm të majtë, e dyta - njëkohësisht për këndin e sipërm të djathtë dhe të poshtëm të majtë, dhe e treta - për këndin e poshtëm të djathtë.
`4`	Vlera e parë vendos rrumbullakimin për këndin e sipërm të majtë, e dyta - për këndin e sipërm të djathtë, e treta - për këndin e poshtëm të djathtë, dhe e katërta - për këndin e poshtëm të majtë.

Rrumbullakim eliptik

Dy vlera nëpërmjet së pjerrës vendosin rrumbullakim eliptik. Vlera para së pjerrës tregon rrumbullakimin horizontal, dhe vlerat pas së pjerrës - vertikalin:

përzgjedhor {
	border-style: horizontal / vertikal;
}

Nëse specifikohen rrumbullakime për disa qoshe, atëherë para së pjerrës përmblidhen të gjitha rrumbullakimet horizontale, dhe pas saj - të gjitha ato vertikale.

Shembull

Le të vendosim rrumbullakimin 10px për të gjitha qoshet:

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

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

Shembull

Le të shohim se si duken rrumbullakimet për kufirin në formë pikash:

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

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

Shembull

Le të vendosim rrumbullakimin në 10px për qoshet e një diagonaleje, dhe rrumbullakimet në 40px - për qoshet e diagonales së dytë:

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

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

Shembull

Le të vendosim rrumbullakimin në 10px për këndin e sipërm të majtë, rrumbullakimin në 30px për këndin e poshtëm të djathtë, dhe rrumbullakimet në 50px - për qoshet e diagonales së dytë:

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

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

Shembull

Le të vendosim rrumbullakime të ndryshme për secilin nga qoshet:

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

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

Shembull

Le të bëjmë një rrumbullakim eliptik, duke vendosur 20px për pjesën horizontale të rrumbullakimit, dhe 40px - për atë vertikale:

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

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

Shembull

Tani le të vendosim rrumbullakime të ndryshme eliptike për të gjitha qoshet veç e veç:

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

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

Shembull

Nëse për një bllok katror vendosen rrumbullakime, të barabarta me gjysmën e anës së katrorit, atëherë fitohet rreth:

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

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

Shembull

Nëse vendoset rrumbullakim, më i madh se ana e katrorit, atëherë gjithsesi fitohet rreth:

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

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

Shembull

Rreth mund të fitohet gjithashtu, nëse vendoset border-radius në 50% (përparësia është se me ndryshimin e madhësive të katrorit nuk do të duhet të ndryshohet rrumbullakimi):

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

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

Shembull

Nëse vendoset border-radius në përqindje për një drejtkëndësh, atëherë fitohet rrumbullakim eliptik. Nëse gjerësia është vendosur në 400px, lartësia në 200px, dhe border-radius në 10%, atëherë kjo është njësoj, sikur të ishte shkruar 40px/20px:

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

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

Shembull

Le të vendosim vlerën border-radius në 50% për një drejtkëndësh - fitohet elips:

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

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

Shembull

Vetija border-radius rrumbullakos jo vetëm qoshet e kufirit, por edhe të sfondit:

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

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

Shihni gjithashtu

vetija border,
e cila është veti-shkurtim për kufirin