Libre, walang account

CSS Border Radius Generator

Hugis ang bawat sulok nang nakapag-iisa, kabilang ang elliptical horizontal at vertical radii. Silipin ang resulta at kopyahin ang compact CSS.

Ipasok ang 0–2,000 px o 0–100%. Ang mga kontrol sa numero na naa-access sa keyboard ay ibinigay.

Kaliwa sa itaas
Kanan sa itaas
Kanan sa ibaba
Kaliwang ibaba

CSS ang radii ng sulok nang proporsyonal kapag lumampas ang kanilang mga kabuuan sa lapad o taas ng elemento. Ang preview ay sumusunod sa CSS na gawi ng browser.

Live na preview

Ayusin ang isang sulok upang i-preview ang hugis nito.

CSS deklarasyon

Paano ako bubuo ng mga halaga ng CSS border-radius?

Pumili ng mga pixel o porsyento, ayusin ang pahalang at patayong radius para sa bawat sulok, pagkatapos ay kopyahin ang nabuong deklarasyon ng border-radius. Ang CSS ay maaaring proporsyonal na gawing normal ang magkakapatong na radii upang magkasya sa elemento.

Mga madalas itanong

Paano ako bubuo ng mga halaga ng CSS border-radius?

Pumili ng mga pixel o porsyento, ayusin ang pahalang at patayong radius para sa bawat sulok, pagkatapos ay kopyahin ang nabuong deklarasyon ng border-radius. Ang CSS ay maaaring proporsyonal na gawing normal ang magkakapatong na radii upang magkasya sa elemento.

Na-upload ba ang aking CSS o disenyo?

Hindi. Ang preview at CSS ay nabuo sa tab ng browser na ito. Walang pag-upload, account, API call o awtomatikong pag-save.

Maaari bang magkaroon ng ibang radius ang bawat sulok?

Oo. Magtakda ng hiwalay na pahalang at patayong halaga para sa itaas na kaliwa, kanang itaas, kanang ibaba at kaliwang sulok.

Ano ang ibig sabihin ng slash sa border-radius?

Ito ay naghihiwalay ng pahalang na radii mula sa patayong radii, na lumilikha ng mga elliptical na sulok. Kung ang bawat sulok ay gumagamit ng parehong pahalang at patayong halaga, aalisin ng generator ang slash.

Bakit maaaring magmukhang mas maliit ang preview kaysa sa mga value?

CSS ay proporsyonal na nag-normalize ng radii na magkakapatong sa isang gilid. Iyon ay karaniwang pag-uugali ng browser at inilalapat din sa preview na ito.