DevToolPal
PL

Generator border-radius CSS

Ustawiaj border-radius CSS dla każdego narożnika, także eliptyczne narożniki i kształty blob, w px, % lub rem, z podglądem na żywo, presetami i najkrótszym CSS do skopiowania.

Działa lokalnie, nic nie jest wysyłane

Narożniki

Jednostka

Podgląd

CSS

Presety
CSS border-radius
 
 
 
 
 
Do czego służy


Generator border-radius pozwala wizualnie kształtować zaokrąglone narożniki i kopiować najkrótszy CSS. Ustaw jeden promień dla wszystkich narożników lub osobny dla każdego, włącz eliptyczne narożniki, by każdy miał osobny promień poziomy i pionowy, i obserwuj, jak podgląd zmienia się podczas przeciągania. Działa w px, %, rem i em, a istniejącą wartość border-radius możesz wkleić do edycji. Wszystko działa w Twojej przeglądarce.


Jak używać


    

  1. Zacznij od presetu albo zostaw przykładowy kształt.
    2. 

  2. Wybierz Jednostkę. Zmiana jednostki przelicza bieżące wartości (rem i em to 16px, % odnosi się do pudełka podglądu).
    3. 

  3. Włącz Ten sam promień dla wszystkich narożników, by używać jednego suwaka, lub wyłącz, by osobno ustawić Lewy górny, Prawy górny, Prawy dolny i Lewy dolny.
    4. 

  4. Włącz Eliptyczne narożniki, aby każdy narożnik miał suwak Poziomo i Pionowo.
    5. 

  5. Zmień rozmiar podglądu przez Szerokość i Wysokość, a potem skopiuj kod z karty CSS. Włącz wyjście longhand, jeśli wolisz cztery osobne właściwości.
    6. 



Przykład


.avatar { border-radius: 50%; }
.tab    { border-radius: 12px 12px 0 0; }
.blob   { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }


Warto wiedzieć


    

  • Najkrótszy zapis. Wyjście łączy jednakowe wartości: cztery równe narożniki dają jedną wartość, a część po ukośniku znika, gdy wszystkie narożniki są okrągłe.
    • 

  • Procenty zależą od pudełka. Procenty poziome liczą się od szerokości elementu, pionowe od wysokości, więc 50% na prostokącie daje elipsę, nie koło.
    • 

  • Promienie, które się nie mieszczą, przeglądarka zmniejsza razem — dlatego ogromna wartość w px daje zgrabną pigułkę.
    • 

  • Dzieci i przepełnienie. Zaokrąglenia przycinają tło i obramowanie, ale nie zawartość elementów potomnych: dodaj overflow: hidden, by przyciąć obrazy w pudełku.
    • 

 
  
 
FAQ
 
 
  › Co oznacza ukośnik w border-radius?  
Wartości przed ukośnikiem to promienie poziome, a po nim — pionowe. Gdy się różnią, narożnik staje się ćwiartką elipsy zamiast okręgu. Na przykład 50% / 30% daje bardziej płaski łuk niż 50%.
 
  › W jakiej kolejności zapisuje się cztery narożniki?  
Zgodnie z ruchem wskazówek zegara od lewego górnego: lewy górny, prawy górny, prawy dolny, lewy dolny. Przy mniejszej liczbie wartości CSS je powtarza: dwie wartości ustawiają lewy górny/prawy dolny i prawy górny/lewy dolny, trzy — lewy górny, prawy górny/lewy dolny i prawy dolny.
 
  › Jak zrobić koło lub pigułkę?  
border-radius: 50% zamienia kwadrat w koło, a prostokąt w elipsę. Dla pigułki z okrągłymi końcami przy dowolnej szerokości użyj bardzo dużej długości, np. 9999px: przeglądarka zmniejsza promienie, które się nie mieszczą, więc końce pozostają idealnie okrągłe.
 
  › Jak powstają kształty blob?  
Bloby używają ośmiu różnych procentów: czterech promieni poziomych i czterech pionowych, np. 30% 70% 70% 30% / 30% 30% 70% 70%. Wybierz preset blob, włącz Eliptyczne narożniki i przeciągaj suwaki narożników, aby zmienić kształt.