Aqbeż għall-kontenut ewlieni
LibraTool logoLibraTool

Ġeneratur ta' Border Radius CSS b'xejn

Iddesinja angoli tonda viżwalment b'kontroll indipendenti fuq kull angolu. Jappoġġja s-sintassi ellittika X/Y għal forom organiki bħal blobs.

Jaħdem offline ladarba mgħobbi
border-radius: 20px 20px 20px 20px;
Unità

Użi komuni

  • Forom tal-Blob OrganiċiUża l-sintassi ellittika X/Y biex toħloq forom blob uniċi għal sezzjonijiet eroiċi u illustrazzjonijiet.
  • Kartunieri tal-Karta u tal-KonteniturKantunieri ta' arrotondament standard għal karts, kontenituri u panels f'disinn UI modern.
  • Avatar u Stampi tal-ProfilOħloq l-istil tal-kantuniera t-tajba għal stampi tal-profil: ċirkulari, squircle, jew kwadru arrotondat.
  • Pilloli, Tags, u BadgesBini buttons tal-pillola perfettament arrotundata, tags u badges bl-preset 9999.
  • Disinji tal-Kantuniera AsimmetriċiImmesgħa raġġi fuq il-kantunieri biex toħloq forom tal-karta u buttons distinktivi, rikonoxxibbli tal-marka.

Kif Taħdem

Il-ġeneratur tal-border-radius jaħdem kompletament fil-browser — m'hemm l-ebda server, l-ebda librerija, u l-ebda tela'. Jibni l-istring tal-valur CSS border-radius direttament f'JavaScript bl-użu tal-istat ta' React u useMemo, imbagħad japplikah bħala stil inline fuq element div ħaj biex il-magna CSS stess tal-browser tirrendja l-forma f'ħin reali.

  1. 1
    Is-slajders jiktbu l-istat
    Kull dħul ta' medda jikteb f'waħda minn tmien varjabbli numeriċi tal-istat — erba' raġġi tal-kantunieri orizzontali u erba' vertikali għall-modalità ellittika. Il-modalità Unifikata tinvolvi t-tmienja kollha fi slajder wieħed permezz ta' helper setAll li jissinkronizza kull valur f'daqqa.
  2. 2
    useMemo tibni l-valur CSS
    Hook useMemo jerġa' jikkalkula l-istring tal-border-radius kull darba li jinbidel kwalunkwe valur ta' kantuniera, unità (px jew %), jew l-immarkar ellittiku. Fil-modalità standard tipproduċi x-shorthand ta' erba' valuri; bl-ellittiku mixgħul, iżid is-separatur slash għas-sintassi sħiħa ta' tmien valuri — eż. 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    Il-magna CSS tal-browser tirrendja l-anteprima
    L-string ikkalkulat jiġi ssettjat bħala stil inline borderRadius fuq element div sempliċi. Il-magna tal-layout tal-browser tagħmel ir-rendjar kollu — m'hemm l-ebda canvas, l-ebda SVG, u l-ebda kodiċi ta' disinn ta' parti terza.
  4. 4
    L-API tal-Clipboard tikkopja l-ħruġ
    L-ikklikkjar ta' Ikkopja jsejjaħ navigator.clipboard.writeText jew bid-dikjarazzjoni CSS (border-radius: ...;) jew bil-klassi ekwivalenti ta' valur arbitrarju ta' Tailwind (rounded-[...]), skont l-immarkar tal-format magħżul.

Għodod Relatati

🎨

Ġeneratur ta' Box Shadow CSS

Builder viżwali għal box-shadow CSS b'preview ħaj, stacking multi-layer, colour picker, toggle inset, u kopja b'klikk wieħed. Jinkludi presets Material, neumorphism, u glow.

Ipprova
🟦

Ġeneratur tas-CSS Grid

Iddisinja CSS grid viżwalment — tracks, units u gaps — u kopja l-CSS u HTML ġenerati.

Ipprova
↔️

Ġeneratur tas-CSS Flexbox

Sperimenta b'flex direction, wrap, justify u align fuq items live — u kopja l-CSS.

Ipprova

Mistoqsijiet Frekwenti