Web-kehityksen Perusteet

CSS Reunukset

Helppo
20 min

CSS-reunuksilla tarkoitetaan reunaviivojen lisäämistä HTML-elementteihin. Reunuksia käytetään yleensä sivuston suunnittelussa korostamaan tiettyjä osia tai antamaan visuaalista erottelua eri elementtien välillä. CSS:n avulla voit määrittää reunaviivan värin, tyylin, paksuuden ja pyöristyksen.

Alla on esimerkkejä CSS-reunaviivojen käytöstä:

Reunaviivan värin määrittäminen

Voit määrittää reunaviivan värin CSS:ssä käyttämällä border-color -ominaisuutta. Esimerkiksi, jos haluat asettaa reunaviivan värin punaiseksi, voit kirjoittaa seuraavan säännön:

border-color: red;

Reunaviivan tyylin määrittäminen

Voit määrittää reunaviivan tyylin käyttämällä border-style -ominaisuutta. Esimerkiksi, jos haluat käyttää pisteviivaa reunaviivana, voit kirjoittaa seuraavan säännön:

border-style: dotted;

Reunaviivan paksuuden määrittäminen

Voit määrittää reunaviivan paksuuden käyttämällä border-width -ominaisuutta. Esimerkiksi, jos haluat asettaa reunaviivan paksuuden 2 pikseliksi, voit kirjoittaa seuraavan säännön:

border-width: 2px;

Reunaviivan pyöristyksen määrittäminen

Voit määrittää reunaviivan pyöristyksen käyttämällä border-radius -ominaisuutta. Esimerkiksi, jos haluat pyöristää reunaviivan kulmat 5 pikselillä, voit kirjoittaa seuraavan säännön:

border-radius: 5px;

Voit myös yhdistellä näitä ominaisuuksia yhteen CSS-sääntöön. Esimerkiksi, jos haluat luoda vihreän reunaviivan, joka käyttää kaksoisviivaa, on 4 pikselin paksuinen ja pyöristetyt kulmat, voit kirjoittaa seuraavan säännön:

border: 4px double green;
border-radius: 10px;

CSS-reunaviivojen avulla voit luoda monipuolisia ja näyttäviä designeja sivustollesi.

Harjoittele

Kokeile itse!
hakatemia pro

Valmis ryhtymään eettiseksi hakkeriksi?
Aloita jo tänään.

Hakatemian jäsenenä saat rajoittamattoman pääsyn Hakatemian moduuleihin, harjoituksiin ja työkaluihin, sekä pääset discord-kanavalle jossa voit pyytää apua sekä ohjaajilta että muilta Hakatemian jäseniltä.