Перайсці да асноўнага зместу
LibraTool logoLibraTool

Генератар CSS Border Radius — бясплатна

Візуальна праектуйце закругленыя кутлы з незалежным кіраваннем кожным кутлом. Падтрымлівае эліптычны сінтаксіс X/Y для арганічных форм-аплікаў.

Працуе афлайн пасля загрузкі
border-radius: 20px 20px 20px 20px;
Адзінка

Тыповыя выкарыстанні

  • Арганічныя формы-плямыВыкарыстоўвайце эліптычны сінтаксіс X/Y, каб ствараць унікальныя формы-плямы для галоўных раздзелаў і ілюстрацый.
  • Вуглы карт і кантэйнераўСтандартныя закругленыя вуглы для карт, кантэйнераў і панэляў у сучасным дызайне інтэрфейсаў.
  • Формы аватараў і фота профілюСтворыце патрэбны стыль вуглоў для фота профілю: круг, сквірсл або квадрат са закругленымі вугламі.
  • Pills, Tags та BadgesСтварайце ідэальна закругленыя кнопкі-пілюлі, тэгі і бэйджы з прэсетам 9999.
  • Асіметрычныя вуглыКамбінуйце розныя радыусы вуглоў, каб ствараць адметныя, пазнавальныя для брэнда формы карт і кнопак.

Як гэта працуе

Генератар border-radius працуе цалкам у браўзеры — няма ні сервера, ні бібліятэкі, ні загрузкі. Ён будуе радок значэння CSS border-radius непасрэдна ў JavaScript з дапамогай стану React і useMemo, потым прымяняе яго як убудаваны стыль на жывым элеменце div, так што ўласны рухавік CSS браўзера рэндэрыць форму ў рэальным часе.

  1. 1
    Паўзункі запісваюць стан
    Кожны ўвод дыяпазону запісвае ў адну з васьмі лічбавых пераменных стану — чатыры гарызантальныя радыусы вуглоў і чатыры вертыкальныя для эліптычнага рэжыму. Уніфікаваны рэжым згортвае ўсе восем у адзін паўзунок праз хелпер setAll, які сінхранізуе ўсе значэнні адразу.
  2. 2
    useMemo збірае значэнне CSS
    Хук useMemo пераразлічвае радок border-radius кожны раз, калі змяняецца значэнне якога-небудзь вугла, адзінка (px ці %) ці пераключальнік эліптычнасці. У стандартным рэжыме гэта дае скарочаны запіс з чатырма значэннямі; з уключаным эліптычным рэжымам дадаецца раздзяляльнік слэш для поўнага сінтаксісу з васьмю значэннямі — напрыклад, 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    Рухавік CSS браўзера рэндэрыць папярэдні прагляд
    Вылічаны радок задаецца як убудаваны стыль borderRadius на звычайным элеменце div. Рухавік разметкі браўзера робіць увесь рэндэрынг — няма ні канваса, ні SVG, ні коду малявання трэціх бакоў.
  4. 4
    Clipboard API капіруе вывад
    Націск на Капіяваць выклікае navigator.clipboard.writeText з дэкларацыяй CSS (border-radius: ...;) ці эквівалентным класам адвольнага значэння Tailwind (rounded-[...]), у залежнасці ад абранага пераключальніка фармату.

Звязаныя інструменты

🎨

Генератар CSS Box Shadow

Візуальны канструктар для CSS box-shadow з жывым прагляданнем, шматслойным стэкаваннем, выбаральнікам колеру, пераключальнікам уставання і капіраваннем адным кліком. Уключае прэсеты Material, нейэмарфізму і свячэння.

Паспрабуйце
🟦

Генератар CSS Grid

Візуальна праектуйце CSS grid — трэкі, адзінкі і промежкі — і капіюйце створаныя CSS і HTML.

Паспрабуйце
↔️

Генератар CSS Flexbox

Эксперыментуйце з напрамкам flex, пераносам, justify і align пры жывых элементах — і скапіюйце CSS.

Паспрабуйце

Часта задаюць пытанні