Border Radius Generator

Paano gamitin ang border radius generator

1. I-drag ang mga tuldok sa gilid ng preview. Ang bawat may kulay na tuldok ay nagtatakda ng pahalang na radius ng isang sulok; kapag may tsek ang Elliptical na mga sulok (8 halaga), ang mga puting tuldok naman ang nagtatakda ng mga patayong radius.
2. O mag-type ng eksaktong halaga sa Mga sulok: Itaas na kaliwa, Itaas na kanan, Ibaba na kanan at Ibaba na kaliwa, bawat isa ay may field na Pahalang at Patayo.
3. Piliin ang Unit: % (porsyento ng kahon) o px (pixel). Kino-convert ng paglipat ang mga kasalukuyang halaga, kaya hindi nagbabago ang hugis.
4. Itakda ang Lapad ng kahon (px) at Taas ng kahon (px) para tumugma sa iyong element, at gamitin ang Lahat ng sulok para bilugan ang lahat nang sabay.
5. Subukan ang Mga preset (Bilugan, Pill, Bilog, Dahon, Patak, Itlog, Ticket at tatlong blob) o i-click ang Random na blob para sa organikong hugis.
6. Lagyan ng tsek ang Mga longhand na property kung mas gusto mo ang apat na deklarasyong border-*-radius, saka kopyahin ang CSS code gamit ang Kopyahin.

Keyboard: i-focus ang isang tuldok at pindutin ang mga arrow key para baguhin ang radius nito nang isang hakbang (10 kapag may Shift).

Gumagana ito sa iyong browser. Walang ini-type mo na ipinapadala sa server.

Ang syntax ng border-radius

Ang border-radius ay tumatanggap ng isa hanggang apat na halaga, sa ayos na itaas na kaliwa, itaas na kanan, ibaba na kanan, ibaba na kaliwa. Tulad ng margin, kinokopya ang mga kulang na halaga mula sa katapat na sulok: ang border-radius: 10px 20px ay binibilugan ang itaas na kaliwa at ibaba na kanan nang 10px, at ang dalawa pa nang 20px. Laging isinusulat ng tool ang pinakamaikling katumbas na anyo.

Ang bawat sulok ay talagang isang kapat ng ellipse na may dalawang radius. Ang slash ang naghihiwalay sa mga pahalang na radius at sa mga patayo, kaya umaabot sa walong halaga:

border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

Bago ang slash: ang mga pahalang na radius ng apat na sulok. Pagkatapos nito: ang mga patayo. Kapag magkapareho ang dalawang listahan, tinatanggal ang bahaging may slash.

Pixel o porsyento?

• Ang px ay nagbibigay ng parehong kurba anuman ang laki ng element. Ito ang tamang pili para sa mga button, card at input: border-radius: 8px.
• Ang % ay nakabatay sa element: ang pahalang na radius sa lapad nito, ang patayo sa taas nito. Ginagawang bilog ng 50% ang parisukat at ellipse ang parihaba. Porsyento ang dahilan kung bakit sumasabay sa laki ng element ang mga blob shape.

Para sa button na hugis pill, gumamit ng radius na hindi bababa sa kalahati ng taas. Iyon mismo ang ginagawa ng preset na Pill para sa laki ng kahon na inilagay mo; gumagana rin ang napakalaking halaga gaya ng 999px.

Kapag lumampas sa katabing gilid ang kabuuan ng magkatabing radius, pinaliliit ng mga browser ang lahat ng radius nang proporsyonal hanggang magkasya. Kaya hindi nasisira ang hugis kapag pinagtawid mo ang dalawang tuldok.

Mga blob shape

Gumagamit ang mga blob preset at ang Random na blob ng walong porsyento kung saan ang dalawang tuldok sa bawat gilid ay may kabuuang 100 %. Eksaktong nagtatagpo ang mga kurba kaya mukhang makinis na bato ang hugis. Maaari mong i-animate ang paglipat ng dalawang blob gamit ang CSS na transition sa border-radius para sa “morphing” na epekto.