Generator CSS Border-Radius

Wizualne dostosowanie zaokrąglonych rogów z podglądem na żywo i kodem CSS do skopiowania.

Promienie pionowe:

px
px 
{{ cssOutput }}

Czym jest border-radius?

Właściwość CSS border-radius zaokrągla rogi elementu. Możesz ustawić jednolity promień dla wszystkich czterech rogów lub stylizować każdy róg indywidualnie. Skrócona notacja podąża za kolejnością: lewy-górny, prawy-górny, prawy-dolny, lewy-dolny.

Eliptyczne promienie obramowania

Dzięki rozszerzonej składni border-radius: H1 H2 H3 H4 / V1 V2 V3 V4 możesz zdefiniować poziomy i pionowy promień dla każdego rogu. Tworzy to eliptyczne krzywe, które generują bardziej organiczne kształty.

Typowe zastosowania

  • Koła: border-radius: 50% na kwadratowym elemencie.
  • Kształt pigułki: border-radius: 9999px dla zaokrąglonych przycisków.
  • Karty: border-radius: 8px do 16px dla nowoczesnych projektów kart.
  • Kształty blob: Różne promienie poziome i pionowe dla organicznych kształtów.