CSS Border Radius -generaattori

Luo CSS border-radius visuaalisesti reaaliaikaisella esikatselulla. Säädä jokaista kulmaa erikseen tai yhdistä ne. Tukee px, % ja rem. Kopioi CSS-koodi. Ilmainen verkkotyökalu.

Esikatselu

Ylävasen 12px

Yläoikea 12px

Alaoikea 12px

Alavasen 12px

Yhdistä kaikki kulmat

Yksikkö

px % rem

CSS-tuloste

Viite

Mikä on CSS border-radius?

CSS-ominaisuus border-radius pyöristää elementin ulkoreunan kulmat. Voit asettaa yhden säteen pyöreille kulmille tai kaksi sädettä elliptisille kulmille.

border-radius-syntaksi

Lyhennemuoto border-radius hyväksyy 1–4 arvoa. Yhdellä arvolla kaikki kulmat ovat samat. Kahdella arvolla ensimmäinen asettaa ylävasen/alaoikea ja toinen yläoikea/alavasen. Neljällä arvolla jokainen kulma asetetaan erikseen: ylävasen, yläoikea, alaoikea, alavasen.

Elliptiset kulmat

Käyttämällä /-syntaksia (esim. border-radius: 50% / 30%) voit määrittää eri vaaka- ja pystysäteet elliptisille kulmille.

Tietosuoja

Kaikki border-radius-luonti tapahtuu 100 % selaimessasi. Mitään tietoja ei lähetetä palvelimelle.

← Takaisin kaikkiin työkaluihin