Border-radius aýratynlygy

border-radius aýratynlygy çäk we fon üçin ýumry burçlar döredýär. Aýratynlygyň bahasy ýaly ululyk üçin birlikler bolup bilýär. Bellenen bahasy: 0. Bu aýratynlyklar üçin gysga ýoldyr: border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Sintaksis

selektory {
	border-radius: baha;
}

Baha sany

Aýratynlyk 1, 2, 3 ýa-da 4 baha alyp biler, bolar boşluk bilen berilýär:

Sany	Düşündiriş
`1`	Ähli burçlar üçin bir wagtyň özünde.
`2`	Birinji baha ýokarky sag we aşaky çep burçlar üçin ýumruklygy belläp berýär, ikinjisi - ýokarky çep we aşaky sag burçlar üçin.
`3`	Birinji baha ýokarky çep burç üçin ýumruklygy belläp berýär, ikinjisi - ýokarky sag we aşaky çep burçlar üçin bir wagtyň özünde, üçünjisi bolsa aşaky sag burç üçin.
`4`	Birinji baha ýokarky çep burç üçin ýumruklygy belläp berýär, ikinjisi - ýokarky sag burç üçin, üçünjisi - aşaky sag burç üçin, dördünjisi bolsa aşaky çep burç üçin.

Elliptiki ýumruklyk

Kesgi çyzyk bilen aýrylan iki baha elliptiki ýumruklyk düzýär. Kesgi çyzygyň öňündäki baha gorizontal ýumruklygy görkezýär, kesgi çyzygyň yzyndaky bahalar bolsa wertikal ýumruklygy:

selektory {
	border-style: gorizontal / wertikal;
}

Eger birnäçe burç üçin ýumruklyklar berilse, onda kesgi çyzygyň öňünde ähli gorizontal ýumruklyklar sanawlanýar, onuň yzynda bolsa ähli wertikal ýumruklyklar.

Mysal

Ähli burçlar üçin 10px ýumruklyk düzeliň:

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

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

Mysal

Çäkiň nokatlar görnüşindäki ýumruklyklaryň näme görnüşini göreliň:

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

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

Mysal

Bir diagonalyň burçlary üçin 10px ýumruklyk düzeliň, ikinji diagonalyň burçlary üçin bolsa 40px ýumruklyk düzeliň:

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

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

Mysal

Ýokarky çep burç üçin 10px ýumruklyk düzeliň, aşaky sag burç üçin 30px ýumruklyk düzeliň, ikinji diagonalyň burçlary üçin bolsa 50px ýumruklyk düzeliň:

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

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

Mysal

Her bir burç üçin dürli-dürli ýumruklyklar düzeliň:

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

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

Mysal

Geliň elliptiki ýumruklyk edeliň, ýumruklygyň gorizontal bölegi üçin 20px düzeliň, wertikal bölegi üçin bolsa 40px düzeliň:

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

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

Mysal

Indi bolsa her bir burç üçin aýratyn dürli elliptiki ýumruklyk düzeliň:

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

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

Mysal

Eger inedördül blogyň üçin inedördüliň tarapynyň ýarysyna deň ýumruklyk goýulsa, onda töwerek alarys:

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

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

Mysal

Eger ýumruklyk inedördüliň tarapyndan uly bolsa, onda ýene-de töwerek alarys:

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

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

Mysal

Töweregi border-radius-y 50% etsek hem alarys (peýdasy inedördüliň ölçegleri üýtgedilende ýumruklygy üýtgetmeli bolmaýar):

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

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

Mysal

Eger border-radius-y prosentde inedördül däl şekil üçin düzsek, onda elliptiki ýumruklyk alarys. Eger ini 400px, beýikligi 200px, border-radius-y bolsa 10% düzsek, onda bu 40px/20px ýazylan ýaly:

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

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

Mysal

Inedördül däl şekil üçin border-radius-y 50% düzeliň - ellips alarys:

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

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

Mysal

border-radius aýratynlygy diňe çäkiň däl, eýsem fonyň burçlaryny hem ýumrudýar:

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

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

Şeýle-de görüň

border aýratynlygy,
bu çäk üçin gysga ýol aýratynlykdyr