Elementeille voidaan määrittää reunus, joka erottaa ne toisistaan. Reunuksen tyyppiä, paksuutta ja väriä voidaan muuttaa halutunlaiseksi.
- Reunuksen paksuus
- Border-width attribuutti määrittää reunuksen paksuuden halutunlaiseksi.
- Reunuksen tyyli
- Border-style attribuutilla voidaan määrittää reunuksen tyyli, eli ulkoasu.
- Reunuksen väri
- Border-color attribuutti määrittää reunuksen värin.
Reunuksen paksuus (border-width)
Border-width attribuutti määrittää reunuksen paksuuden halutunlaiseksi. Attribuutin arvoina voidaan käyttää esimerkiski pituuksia. Voidaan myös käyttää arvoja; thin, medium ja thick. Thin tekee ohuen reunuksen, medium tekee keskisuuren reunuksen ja thict tekee paksun reunuksen.
Esimerkkejä
border-width:1px; border-width:0.05em border-width:thin border-top-width:1px; border-right-width:3px; border-bottom-width:6px; border-left-width:0px; border-width:1px 2px 3px 4px; border-width:1px 4px;
Tässä elementissä reunuksen paksuus on 1 pikseliä.
Tässä elementissä on tason "medium" reunus.
Tässä elementissä on ylhäällä 1 pikseliä oleva reunus, oikealla 2 pikseliä, ahaalla 3 pikseliä ja vasemmalla 4 pikseliä.
Reunuksen tyyli (border-style)
Border-style attribuutilla voidaan määrittää reunuksen tyyli, eli ulkoasu. Kaikki selaimet eivät kuitenkaan tue kaikkia tyylejä.
- Mahdollisia arvoja
- none - reunusta ei näytetä
- solid - yhtenäinen
- double - kaksinkertainen
- dotted - pilkutettu
- dashed - katkoviivoitettu
- inset - upotettu
- outset - korotettu
- ridge - harjamainen
- groove - kourumainen
- Rajaa ei näytetä.
- Tyylin "solid" raja.
- Tyylin "double" raja.
- Tyylin "dotted" raja.
- Tyylin "dashed" raja.
- Tyylin "inset" raja.
- Tyylin "outset" raja.
- Tyylin "ridge" raja.
- Tyylin "groove" raja.
Reunuksen väri (border-color)
Border-color attribuutti määrittää reunuksen värin. Arvo voidaan antaa RGP-arvoina, värin englanninkielisellä nimellä, tai hex-koodeilla.
border-color:red; border-color:#FF0000; border-color:rgp(255,0,0);
Tässä reunuksen väri on määritelty nimellä; red.
Tässä reunuksen väri on määritelty hex-koodilla; #ff0000
Tässä reunuksen väri on määritelty RGP-arvolla; 255,0,0
Voidaan tietenkin määrittää jokaiselle reunalle oma väri.
border-color:arvo arvo arvo arvo;
Esimerkki
border-color:red black yellow white;
Tämän elementin yläreunus on punainen, oikea reunus musta, alareunus keltainen ja vasen reunus valkoinen.


