Border Radius Generator

Bilugin ang bawat sulok gamit ang mga slider, humubog ng mga organic blob gamit ang elliptical mode, at kopyahin ang CSS agad-agad.

Mga Preset
Mga Sulok
Lahat ng sulok
24px
CSS
I-drag ang mga slider para bilugin ang iyong mga sulok.

Ang bawat sulok ay iginuguhit mismo sa iyong browser. Walang anuman sa mga inilalagay mo rito ang ina-upload sa BroBroGo.

FAQ

Paano gumagana ang apat na sulok at ang px vs %?

Ang apat na slider ay tumutukoy, clockwise, sa itaas-kaliwa, itaas-kanan, ibaba-kanan, at ibaba-kaliwang sulok. Sa pixel, ang sulok ay bibilog sa nakatakdang sukat; sa porsyento, bibilog ito batay sa sukat ng box — ang horizontal na porsyento ay sumusunod sa lapad at ang vertical na porsyento ay sumusunod sa taas, kaya ang 50% ay nagiging bilog mula sa parisukat.

Ano ang ginagawa ng elliptical mode?

Kapag naka-off, ang bawat sulok ay quarter-circle na may iisang radius. I-on ito at ang bawat sulok ay magkakaroon ng magkahiwalay na horizontal at vertical radius, na siyang paraan para makabuo ng malalambot at organic na hugis "blob". Isusulat ng generator ang two-value slash form para sa iyo at babalik sa maikling anyo kapag naging bilog muli ang mga sulok.

Paano ako gagawa ng perpektong bilog o hugis-tableta?

I-link ang mga sulok, lumipat sa porsyento at i-set sa 50%: ang parisukat ay magiging bilog. Para sa button na mukhang tableta, panatilihin ang mga pixel at i-drag ang sulok lampas sa kalahati ng taas ng button — mananatiling bilugan ang mga gilid sa kahit anong lapad. Ang Circle preset ay nag-aayos sa unang sitwasyon sa isang click lang.

CSS Cubic Bezier GeneratorI-drag ang dalawang handle para hubugin ang easing curve, panoorin ang paggalaw ng dot kumpara sa steady na dot, at kopyahin ang cubic-bezier() value.Box Shadow GeneratorI-drag ang mga slider para humubog ng box-shadow, magpatong ng mga layer para sa lalim, at kopyahin ang natapos na CSS agad-agad.Gradient GeneratorBumuo ng linear, radial, o conic na gradient, magdagdag ng mga color stop at i-set ang direksyon, pagkatapos ay kopyahin ang CSS sa isang click lang.Flexbox GeneratorMag-set up ng flex container at ng mga item nito gamit ang mga visual na kontrol, panoorin ang reaksyon ng layout nang live, at kopyahin ang CSS sa isang click lang.CSS Grid GeneratorI-set ang iyong mga column at row, i-drag sa mga cell para maglagay ng mga item, at kopyahin ang grid CSS kasama ang katugmang HTML sa isang click lang.CSS clamp() CalculatorMaglagay ng sukat para sa maliliit at malalaking screen at kumuha ng fluid na clamp() value na maayos na nag-i-scale sa pagitan — para sa mga sukat ng font, padding, margin o gap.Color ConverterMag-convert ng mga kulay sa pagitan ng HEX, RGB, HSL, HSV, CMYK, at LAB — i-edit ang kahit anong field at ang iba ay mag-a-update habang nagpapatuloy ka.