Border radius -generaattori
Aseta jokainen kulma ja kopioi CSS.
- Toimii selaimessasi — tekstiäsi ei lähetetä minnekään
- Ei rekisteröitymistä, ei kiintiöitä, ilmainen käyttää niin usein kuin haluat
Näin se toimii
border-radius on yksinkertainen, kunnes haluat kolme pyöristettyä kulmaa ja yhden suoran, jolloin kaikkien täytyy tarkistaa neljän arvon järjestys.
Järjestys lopullisesti
Vasen yläkulma, oikea yläkulma, oikea alakulma, vasen alakulma – myötäpäivään vasemmasta yläkulmasta alkaen. Sama myötäpäivään vasemmasta yläkulmasta alkava järjestys pätee myös marginin, paddingin ja borderin lyhytmerkintöihin, mikä kannattaa painaa mieleen kerralla.
Pikselit vai prosentit
Pikselit antavat saman kaarevuuden elementin koosta riippumatta. Prosentit suhteutuvat elementin omaan leveyteen ja korkeuteen, joten kaarevuus skaalautuu – ja 50 %:n säde neliölle antaa täydellisen ympyrän, mikä on tavallinen temppu pyöreissä profiilikuvissa.
Pillerin muoto
Elementin korkeuden puolikasta suurempi säde rajataan täsmälleen puoleen, minkä vuoksi border-radius: 999px tuottaa luotettavasti pillerin korkeudesta riippumatta. Se on kestävämpi kuin oikean arvon laskeminen, koska se toimii edelleen, kun sisältö muuttuu.
Kun kulmat näyttävät väärältä sisäkkäisissä elementeissä
Pyöristetyn laatikon sisällä olevan pyöristetyn laatikon tarvitsee saada pienempi säde, jota on vähennetty niiden välisellä paddingilla, tai kaaret eivät asetu samankeskisesti. Se on pieni yksityiskohta, joka saa kortit näyttämään kunnolla tehdyiltä.
Border radius -generaattori – kysymyksiä
Missä järjestyksessä neljä arvoa ovat?
Vasen yläkulma, oikea yläkulma, oikea alakulma, vasen alakulma – myötäpäivään vasemmasta yläkulmasta alkaen.
Miten teen täydellisen ympyrän?
border-radius: 50% elementille, joka on täsmälleen neliö.
Miten teen pillerinmuotoisen painikkeen?
Käytä suurta arvoa, kuten 999px. Selaimet rajaavat sen puoleen korkeudesta, joten se toimii missä tahansa koossa.
Pitäisikö käyttää pikseleitä vai prosentteja?
Pikseleitä tasaiseen kaarevuuteen; prosentteja, kun haluat sen skaalautuvan elementin mukana.
Toimiiko se kaikkialla?
Kyllä. border-radius on ollut tuettu ilman etuliitettä reilusti yli kymmenen vuotta.