> For the complete documentation index, see [llms.txt](https://digikiad.gitbook.io/digitalis-kiadvanyok/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://digikiad.gitbook.io/digitalis-kiadvanyok/css-technikak/koer-ellipszis.md).

# Kör, ellipszis

## Kör

Kört a `border-radius` (keret lekerekítés) CSS tulajdonsággal lehet létrehozni [blokkos elemekből](/digitalis-kiadvanyok/css/doboz-modell.md#toembszeru-vagy-blokkos-elemek-jellemzoi). Alapfeltétel, hogy az elem szélessége és magassága megegyezzen. A `border-radius` értéke 50%, vagy nagyobb kell legyen, hogy létrejöjjön a kör.

```css
div {
    width: 150px;
    height: 150px;
    border-radius: 50%;
}
```

## Ellipszis

Annyiban különbözik a körtől, hogy az oldalak hosszai nem ugyanakkorák, ha a szélessége nagyobb a magasságánál, fekvő ellipszis jön létre, ha a magassága nagyobb szélességénél, álló ellipszis.

```css
div {
    width: 200px;
    height: 150px;
    border-radius: 50%;
}
```

![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-LSAaWDjpDzQQh4cvT1O%2F-LSAcFLYI25_rsNd0u7m%2Fcircle.png?alt=media\&token=563be8ea-ce01-45be-b2da-c3b33245deac)

{% embed url="<https://codepen.io/_lacus/pen/qQKZvV>" %}

Háttérkép és keret is használható ezzel a technikával:

{% embed url="<https://codepen.io/_lacus/pen/MOWmZg>" %}