# Szegély és sarkok lekerekítése

> Szegélytípus, szélesség, szín és a sarkok lekerekítése, példákkal körre, tablettára és kártyára.

A legtöbb elemnek alapból nincs látható szegélye. A szegéllyel kiemelheted az elemet, és elkülönítheted a többitől.

## Szegély típusának kiválasztása

A **Szegély** szekció a **Haladó** fülön található (konténernél a **Stílus** fülön). A **Normál** és a **Rámutatás** fülön külön szegélyt adhatsz.

![A Szegély szekció a típusválasztóval](./kepek/stilus-szegely-tipus.webp)

*A Szegély szekció a típusválasztóval* (https://minta-bolt.hu/wp-admin/post.php?post=24&action=elementor)

A **Szegély típusa** öt lehetőséget kínál a nincs mellett:

- **Folytonos:** egyetlen, megszakítás nélküli vonal az elem körül.
- **Dupla:** két párhuzamos vonal.
- **Pontozott:** pontokból álló vonal.
- **Szaggatott:** szaggatott vonal.
- **Barázda:** képkerethez hasonlító szegély.

Ha szegélyt választasz, megjelenik a **Keret szélessége** (négy oldalra külön is megadható) és a **Szegélyszín**. A színt a színválasztóval vagy globális színnel adhatod meg (lásd: [Szín kiválasztása](https://hub.hellowp.io/hu/plugins/elementor/stilus-szinvalasztas/)). Ezek mellett a **Sarkok lekerekítése** is itt állítható.

## Szegély a V4 szerkesztőben (Stílus fül)

Az atomikus (V4) elemeken a szegély a **Stílus** fül **Szegély** szekciójában van.

1. Nyisd meg az oldalt az Elementor szerkesztőben, és jelöld ki az elemet.
2. Kattints a **Stílus** fülre, és nyisd ki a **Szegély** szekciót.
3. A **Szegélyvastagság** mezőben add meg a vastagságot. Ha a négy oldalra eltérő vastagságot szeretnél, kattints a mező melletti gombra, amely szétkapcsolja az oldalakat.
4. A **Szegély színe** mezőben válassz színt (lásd: [Szín kiválasztása](https://hub.hellowp.io/hu/plugins/elementor/stilus-szinvalasztas/)).
5. A **Szegély típusa** listából válaszd ki, milyen legyen a vonal.
6. A **Szegély lekerekítése** mezőbe írt számmal lekerekítheted a sarkokat. A mellette lévő gombbal a négy sarokhoz külön értéket adhatsz.

![A Szegély szekció a Stílus fülön: vastagság, szín, típus és lekerekítés](./kepek/stilus-v4-szegely.webp)

*A Szegély szekció a Stílus fülön: vastagság, szín, típus és lekerekítés* (https://minta-bolt.hu/wp-admin/post.php?post=22&action=elementor)

A **Szegély típusa** lista elemei:

![A Szegély típusa lista](./kepek/stilus-v4-szegely-tipus.webp)

*A Szegély típusa lista* (https://minta-bolt.hu/wp-admin/post.php?post=22&action=elementor)

| Típus | Megjelenése |
|---|---|
| **Nincs** | Nincs szegély. |
| **Folytonos** | Egyetlen, megszakítás nélküli vonal. |
| **Szaggatott** | Szaggatott vonal. |
| **Pontozott** | Pontokból álló vonal. |
| **Dupla** | Két párhuzamos vonal. |
| **Barázda** | Bevésett, árnyékolt hatású szegély. |
| **Domború** | A szegély kiemelkedik az elem körül. |
| **Süllyesztett** | Az elem belesüllyedtnek látszik. |
| **Kiemelkedő** | Az elem kiemelkedőnek látszik. |

## Sarkok lekerekítése

A sarkok lekerekítésével élek simíthatók el, vagy egyedi alakzatok (tabletta, kör) hozhatók létre.

### Hol találod

1. Jelölj ki egy widgetet, konténert vagy szakaszt a szerkesztőben.
2. A panelen nyisd meg a **Stílus** fület (a widgeteknél a **Haladó** fület), és nyisd ki a **Szegély** szekciót.

A sarkok lekerekítéséhez nem kell szegélytípust választanod: ha a **Szegély típusa** alapértelmezett vagy nincs, a lekerekítés akkor is megjelenik a háttérszínen, a háttérképen és az elem szélén.

### Értékek megadása

1. Válaszd ki a mértékegységet a beviteli mezők fölött:
   - `PX` (képpont): állandó, pontos, egyenletes lekerekítés.
   - `%`: az elem méretéhez viszonyított érték, körhöz és ellipszishez ideális.
   - `EM` és `REM`: a betűmérethez igazodó, reszponzív érték.
   - `VW`: a nézetablak szélességéhez viszonyított érték.
   - `Egyéni`: egyéni CSS-mértékegység vagy globális CSS-változó.
2. Adj meg értékeket:
   - **Egyenletes sarkok (összekapcsolva):** hagyd kiemelve az értékek összekapcsolása ikont (lánc). Ha bármelyik mezőbe beírsz egy számot, mind a négy sarok (fent, jobb, lent, bal) egyszerre változik.
   - **Egyedi sarkok (szétkapcsolva):** kattints a lánc ikonra, hogy szétkapcsold a mezőket. Minden sarokhoz külön értéket adhatsz, így aszimmetrikus alakzatokat építhetsz.

### Példák és tippek

- **Tökéletes kör:** az elem szélessége és magassága egyezzen meg, a sarkok lekerekítése pedig mind a négy sarokra legyen `50%`.
- **Tabletta alakú gombok:** adj meg nagy képpontértéket (például `999px`) mind a négy sarokra.
- **Aszimmetrikus kártyák:** kapcsold szét a mezőket, és csak két átellenes sarkot kerekíts le (például Fent bal: `20px`, Lent jobb: `20px`, Fent jobb: `0px`, Lent bal: `0px`).

## Kétféle vezérlő

A sarkok lekerekítését kétféle vezérlővel adhatod meg: csúszkával és számlálóval.

- **Csúszka:** húzd el, amíg a kívánt hatást el nem éred.
- **Számláló:** a négy számlálóval külön-külön állíthatod az egyes sarkokat.

Az elemtől függően az értékek százalékban, képpontban vagy más mértékegységben adhatók meg.