Generator zaobljenih uglova (border-radius)

Kako se koristi generator zaobljenih uglova

1. Prevlači tačke na ivicama pregleda. Svaka obojena tačka određuje horizontalni poluprečnik jednog ugla, a kad je uključeno Eliptični uglovi (8 vrednosti), bele tačke određuju vertikalne poluprečnike.
2. Ili upiši tačne vrednosti u odeljku Uglovi: Gore levo, Gore desno, Dole desno i Dole levo, svaki sa poljem Horizontalno i poljem Vertikalno.
3. Izaberi Jedinica: % (procenat okvira) ili px (pikseli). Pri promeni jedinice trenutne vrednosti se preračunavaju, pa oblik ostaje isti.
4. Podesi Širina okvira (px) i Visina okvira (px) prema svom elementu, a pomoću Svi uglovi zaobli sve uglove odjednom.
5. Probaj Gotovi oblici (Zaobljeno, Pilula, Krug, List, Kap, Jaje, Karta i tri mrlje) ili klikni Nasumična mrlja za organski oblik.
6. Uključi Pojedinačna svojstva ako više voliš četiri deklaracije border-*-radius, pa kopiraj CSS kod dugmetom Kopiraj.

Tastatura: fokusiraj tačku i pritiskaj strelice da promeniš njen poluprečnik za jedan korak (10 uz Shift).

Alat radi u tvom pregledaču. Ništa što upišeš ne šalje se na server.

Sintaksa svojstva border-radius

border-radius prima od jedne do četiri vrednosti, redom: gore levo, gore desno, dole desno, dole levo. Kao kod margina, vrednosti koje nedostaju preuzimaju se od suprotnog ugla: border-radius: 10px 20px zaobljuje gore levo i dole desno sa 10px, a ostala dva ugla sa 20px. Alat uvek ispisuje najkraći ekvivalentan oblik.

Svaki ugao je zapravo četvrtina elipse sa dva poluprečnika. Kosa crta razdvaja horizontalne poluprečnike od vertikalnih, pa ukupno može biti do osam vrednosti:

border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

Pre kose crte su horizontalni poluprečnici četiri ugla, a posle nje vertikalni. Kad su obe liste jednake, deo posle kose crte se izostavlja.

Pikseli ili procenti?

• px daje istu krivinu bez obzira na veličinu elementa. To je pravi izbor za dugmad, kartice i polja za unos: border-radius: 8px.
• % je relativan u odnosu na element: horizontalni poluprečnici prema njegovoj širini, vertikalni prema visini. 50% pretvara kvadrat u krug, a pravougaonik u elipsu. Procenti omogućavaju da se oblici mrlja skaliraju zajedno sa elementom.

Za dugme u obliku pilule koristi poluprečnik u pikselima od najmanje polovine visine. Gotov oblik Pilula radi upravo to za veličinu okvira koju si uneo, a funkcioniše i ogromna vrednost poput 999px.

Kad zbir susednih poluprečnika premaši stranu koju dele, pregledači proporcionalno smanjuju sve poluprečnike dok se ne uklope. Zato se oblik ne kvari kad prevučeš dve tačke jednu preko druge.

Oblici mrlja

Gotove mrlje i Nasumična mrlja koriste osam procenata kod kojih zbir dve tačke na svakoj strani iznosi 100 %. Krive se tada savršeno spajaju, a oblik izgleda kao glatki oblutak. Za efekat „preobražaja“ animiraj prelaz između dve mrlje pomoću CSS-a transition na svojstvu border-radius.