Border-radius sortzailea

Doitu ertz bakoitzaren biribiltasuna eta kopiatu border-radius kodea. Aktibatu modu aurreratua ertz bakoitzari erradio horizontal eta bertikal desberdinak emateko eta forma organikoak (blobak) sortzeko.

Nola dabilen border-radius

border-radius propietateak balio bat eta lau bitartean onartzen ditu, erlojuaren orratzen noranzkoan aplikatzen direnak goiko ezkerreko ertzetik hasita: 10px balioak ertz guztiak berdin biribiltzen ditu; 10px 20px balioak goiko ezkerrekoari eta beheko eskuinekoari 10px ematen dizkie eta beste biei 20px; eta 10px 20px 30px 40px balioak bakoitza bere aldetik. Propietate indibidualak ere badaude, border-top-left-radius kasu.

Barra batekin erradio desberdinak adierazten dira horizontalean eta bertikalean, eta ertz bakoitza elipse-laurden bihurtzen da: 50% / 60% 60% 40% 40% balioak arrautza bat marrazten du. Horrela sortzen dira gaur egungo web-diseinuan hain ohikoak diren forma organikoak edo «blobak».

Zirkuluak eta pilulak

Zirkulu bat lortzeko, erabili border-radius: 50% kutxa karratu batean (karratua ez bada, elipse bat aterako da). Pilula edo mutur biribileko botoi baterako, erabili altueraren erdia baino handiagoa den pixel-balio bat, 999px adibidez: nabigatzaileak automatikoki mugatzen du, eta forma ez da deformatzen zabalera aldatzean.

Ertz biribilduek atzealdea eta itzalak ere mozten dituzte, baina ez kutxatik ateratzen den edukia: irudi bat mozteko, gehitu overflow: hidden.