CSS Reunukset

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