Border Radius -generaattori

CSS-ominaisuus border-radius määrittää elementin ulkoreunan kulmien pyöristyksen. Border Radius -generaattori on työkalu, jolla voit säätää laatikon kulmien pyöristystä liukusäätimillä, kokeilla erilaisia muotoja ja kopioida valmiin CSS-koodin suoraan omaan projektiisi. Työkalu toimii kokonaan paikallisesti: jokainen kulma piirretään suoraan selaimessasi, eikä mitään tekemiäsi asetuksia lähetetä BroBroGo-palveluun.

CSS border-radius -ominaisuuden perusteet

CSS-koodissa border-radius määrittää, kuinka suuri osa elementin kulmasta pyöristetään. Kun kulmat pyöristetään, kulman kohdalle muodostetaan kaari, jonka säteen pituus määrittää pyöristyksen voimakkuuden. Alkuperäisessä tilassaan generaattorin liukusäätimen arvo on 24, mikä tuottaa CSS-koodin border-radius: 24px;.

Generaattorissa on neljä kulmasäädintä, jotka kartoitetaan myötäpäivään ylävasemmasta kulmasta alkaen:

1. Ylävasen (border-top-left-radius)
2. Yläoikea (border-top-right-radius)
3. Alaoikea (border-bottom-right-radius)
4. Alavasen (border-bottom-left-radius)

Kun valinta "Linkitä kaikki kulmat" on käytössä, yhtä liukusäädintä nimeltään "Kaikki kulmat" siirtämällä säädetään kaikkia neljää kulmaa samanaikaisesti. Kun linkitys poistetaan, jokaiselle kulmalle avautuu oma säätimensä: "Ylävasen", "Yläoikea", "Alaoikea" ja "Alavasen". Liukusäätimien säätöalue on välillä 0–100.

Pikselit ja prosentit yksikköinä

Yksikkövalitsimella voidaan vaihtaa kahden eri mittayksikön välillä:

• px (pikselit): Pikseleitä käytettäessä kulma pyöristyy kiinteän määrän elementin koosta riippumatta. Jos elementin koko muuttuu, pyöristyksen säde pysyy samana.
• % (prosentit): Prosenttiyksikkö tekee pyöristyksestä suhteellisen elementin omiin mittoihin nähden. Vaakasuuntainen pyöristys noudattaa elementin leveyttä ja pystysuuntainen pyöristys noudattaa elementin korkeutta. Tämä mahdollistaa responsiiviset muodot, jotka mukautuvat elementin koon muuttuessa.

Elliptiset kulmat ja edistyneet muodot

Kun "Elliptiset kulmat" -valinta on pois päältä, jokainen kulma on täydellinen neljännesympyrä, jota ohjaa yksi säteen arvo. Kun "Elliptiset kulmat" otetaan käyttöön, siirrytään elliptiseen tilaan. Tällöin jokainen kulma saa kaksi erillistä säädintä: "Vaaka" (vaakasuuntainen säde) ja "Pysty" (pystysuuntainen säde).

Elliptisessä tilassa CSS-koodiin muodostetaan kahden arvon vinoviivamuoto (esimerkiksi border-radius: 10px / 20px;), jossa vinoviivan vasemmalla puolella ovat vaakasuuntaiset säteet ja oikealla puolella pystysuuntaiset säteet. Jos kulmat palautetaan pyöreiksi eli vaaka- ja pystysäteet ovat samat, generaattori pudottaa koodin takaisin lyhyeen muotoon ilman vinoviivaa. Elliptisen tilan avulla voidaan luoda epäsymmetrisiä, pehmeitä ja orgaanisia "läiskämuotoja" (blob).

Täydelliset ympyrät ja pilleripainikkeet

Tietyt yleiset käyttöliittymäelementit vaativat tarkat sääntömääräiset asetukset, jotka on helppo toteuttaa generaattorilla:

• Täydellinen ympyrä: Jos haluat muuttaa neliön muotoisen elementin täydelliseksi ympyräksi, linkitä kaikki kulmat, vaihda yksiköksi prosentti (%) ja aseta liukusäätimen arvoksi 50%. Tämä pyöristää jokaisen kulman tasan puoleen väliin elementin sivun pituudesta.
• Pilleripainike: Kun haluat luoda pillerin muotoisen painikkeen, jonka päädyt pysyvät täysin pyöreinä elementin leveydestä riippumatta, käytä pikseliyksikköä (px). Vedä kulmasäädin arvoon, joka ylittää puolet painikkeen korkeudesta. Tällöin kulmat pyöristyvät maksimaalisesti ja sivut pysyvät suorina, vaikka painikkeen leveys muuttuisi.

Valmiit esiasetukset nopeaan suunnitteluun

Generaattori sisältää viisi valmista esiasetuspainiketta, joiden avulla voit muuttaa esikatselulaatikon muotoa yhdellä klikkauksella:

• Terävä ("Terävä"): Asettaa kaikkien kulmien arvoksi 0, jolloin laatikosta tulee suorakulmainen.
• Pyöristetty ("Pyöristetty"): Palauttaa perinteisen maltillisen kulmapyöristyksen.
• Ympyrä ("Ympyrä"): Asettaa kaikkien kulmien arvoksi 50%, mikä tekee neliöstä ympyrän.
• Läiskä ("Läiskä (Blob)"): Hyödyntää elliptistä tilaa ja epäsymmetrisiä säteitä luoden pehmeän, epäsäännöllisen orgaanisen muodon.
• Lehti ("Lehti"): Pyöristää vain osan kulmista vastakkaisilla puolilla luoden lehteä muistuttavan symmetrisen muodon.

CSS-koodin soveltaminen

Kun olet säätänyt kulmat haluamaasi muotoon, generaattori näyttää valmiin CSS-koodin "CSS"-otsikon alla. Voit kopioida koodin leikepöydälle klikkaamalla "Kopioi CSS" -painiketta. Koodi liitetään osaksi tyylitiedostoasi kohde-elementin luokkaan tai tunnisteeseen:

.laatikko {
  /* Liitä kopioitu koodi tähän */
  border-radius: 50px 20px 50px 20px;
}

Usein kysytyt kysymykset

Miten neljä kulmaa ja px vs. % toimivat?

Neljä liukusäädintä vastaavat myötäpäivään ylävasenta, yläoikeaa, alaoikeaa ja alavasenta kulmaa. Pikseleinä kulma pyöristyy kiinteän määrän; prosenteina se pyöristyy suhteessa laatikkoon – vaakasuuntainen prosenttiosuus noudattaa leveyttä ja pystysuuntainen korkeutta, joten 50% muuttaa neliön ympyräksi.

Mitä elliptinen tila tekee?

Kun tila on pois päältä, jokainen kulma on neljännesympyrä yhdellä säteellä. Kun otat sen käyttöön, jokainen kulma saa erillisen vaaka- ja pystysäteen, joiden avulla voit luoda pehmeitä, orgaanisia "läiskämuotoja" (blob). Generaattori kirjoittaa puolestasi kahden arvon vinoviivamuodon ja palaa lyhyeen muotoon heti, kun kulmat ovat jälleen pyöreitä.

Miten teen täydellisen ympyrän tai pillerin muodon?

Linkitä kulmat, vaihda yksiköksi prosentti (%) ja aseta arvoksi 50%: neliöstä tulee täydellinen ympyrä. Jos haluat pillerin muotoisen painikkeen, käytä pikseleitä (px) ja vedä kulmasäädin yli puoleen painikkeen korkeudesta – sivut pysyvät täysin pyöristettyinä leveydestä riippumatta. Ympyrä-esiasetus tekee ensimmäisen näistä yhdellä klikkauksella.