Siirry sivun sisältöön Avut CSS HTML JavaScript Kotisivu

border-width

border-width on pikakirjoitusominaisuus, jolla voidaan yhdistää elementin kaikkien reunaviivojen leveydet yhdeksi ilmoitukseksi. Arvoiksi kelpaavat mitta-arvot, sekä seuraavat avainsanat:

DOM-viittaus: olio.style.borderWidth

Huomiot

Esimerkki

Huomio! Tämän esimerkin toiminnallisuus vaatii tyylitukea.

Tämä on esimerkkielementti, jolle on pyydetty seuraavat tyylimääritykset:

#esimerkkielementti {
border:1px dotted #aaa;/*reunaviiva ympärille*/
border-width:1px;/*edellisen säännön 1. arvo*/
}

Elementin emolle on määritetty border-width-ominaisuuden arvoksi 1em.

Lisätietoja englanniksi

Käytännön sovellus: taitettu kulma

Seuraavassa toteutetaan näennäiselementillä ja reunaviivoilla taitetuksi kulmaksi kutsuttu efekti. Näennäiselementillä ei ole leveyttä eikä korkeutta, mutta sille asetetaan leveä ylä- ja vasen reunaviiva, joilla määritellään vasemman yläkulman koko. Esimerkin vuoksi kulmaan on lisätty suoristus osoitusselektorilla (:hover), sekä hieman siirtymäefektiä, joilla ei sinänsä ole vaikutusta itse kulman muodostumiseen.

Taitettuun kulmaan vaikuttavat tyylit:

#taitettukulma {
/*Lohkon taustan ja edustan värit:*/
background:cornflowerblue;
color:antiquewhite;
/*Hieman täytettä:*/
padding:1em;
/*Sijoittamalla lohko perustetaan uusi
  asemointilohko näennäiselementille:*/
position:relative;
}
/*Luodaan näennäiselementti:*/
#taitettukulma::before {
/*Tyhjä merkkijono sisältönä:*/
content:"";
/*Ehdoton sijoittelu lohkon vasempaan yläkulmaan:*/
position:absolute;
top:0;
left:0;
/*Annetaan yhtenäinen (solid) paksuhko
  (kulman koko, nyt 6em) reunaviiva
  vasemmalle ja alas:*/
border-left:solid 6em white;/*lohkon taustan väri*/
border-bottom:solid 6em  darkblue;/*kulman väri*/
/*Kahden sekunnin (CSS3) siirtymäefekti:*/
transition:2s;
}
/*Kulman suoristus lohkoa osoittaessa:*/
#taitettukulma:hover::before {
border-width:0;
transition:2s;
}
CSS 2.1 -minaisuusreferenssi | CSS 2.1 -laatikko-ominaisuudet