Reunukset

CSS reunukset


CSS border-ominaisuudet määrittävät elementin ympärillä esitettävät kehykset.


Esimerkkejä

All the border properties in one declaration
Esimerkki kaikkien CSS border-ominaisuuksien asettamisesta yhdellä määrityksellä.

Set different borders on each side
Esimerkki erilaisten reunusten asettamisesta elementin eri puolille.

All the top border properties in one declaration
Esimerkki kaikkien elementin yläreunusominaisuuksien asettamisesta yhdellä määrityksellä.

All the bottom border properties in one declaration
Esimerkki kaikkien elementin alareunusominaisuuksien asettamisesta yhdellä määrityksellä.

All the left border properties in one declaration
Esimerkki kaikkien elementin vasemman reunuksen ominaisuuksien asettamisesta yhdellä määrityksellä.

All the right border properties in one declaration
Esimerkki kaikkien elementin oikean reunuksen ominaisuuksien asettamisesta yhdellä määrityksellä.

Set the style of the four borders
Esimerkki kaikkien reunojen tyylien määrittämisestä.

Set the style of the top border
Esimerkki yläreunuksen tyylin määrittämisestä.

Set the style of the bottom border
Esimerkki alareunuksen tyylin määrittämisestä.

Set the style of the left border
Esimerkki vasemman reunuksen tyylin määrittämisestä.

Set the style of the right  border
Esimerkki oikean reunuksen tyylin määrittämisestä.

All the width of the border properties in one declaration
Esimerkki kaikkien reunojen leveyden määrittämisestä.

Set the width of the top border
Esimerkki yläreunuksen leveyden määrittämisestä.

Set the width of the bottom border
Esimerkki alareunuksen leveyden määrittämisestä.

Set the width of the left border
Esimerkki vasemman reunuksen leveyden määrittämisestä.

Set the width of the right border
Esimerkki oikean reunuksen leveyden määrittämisestä.

Set the color of the four borders
Esimerkki kaikkien reunojen värien määrittämisestä.

Set the color of the top border
Esimerkki yläreunuksen värin määrittämisestä.

Set the color of the bottom border
Esimerkki alareunuksen värin määrittämisestä.

Set the color of the left border
Esimerkki vasemman reunuksen värin määrittämisestä.

Set the color of the right border
Esimerkki oikean reunuksen värin määrittämisestä.


CSS Border ominaisuudet

CSS:n border-ominaisuudet mahdollistavat elementin reunuksen tyylin ja värin määrittämisen. HTML:ssä käytetään taulukoita reunusten luomiseen tekstin ympärille, mutta CSS mille tahansa elementille voidaan asettaa reunus eri efektein.

Selaintuki: IE: Internet Explorer, F: Firefox, N: Netscape.

W3C: Numero "W3C"-sarakkeessa ilmaisee missä W3C:n CSS rekommendaatiossa omionaisuus on määritetty (CSS1 tai CSS2).

Ominaisuus Kuvaus Arvot IE F N W3C
border A shorthand property for setting all of the properties for the four borders in one declaration border-width
border-style
border-color
4 1 4 1
border-bottom A shorthand property for setting all of the properties for the bottom border in one declaration border-bottom-width
border-style
border-color
4 1 6 1
border-bottom-color Sets the color of the bottom border border-color 4 1 6 2
border-bottom-style Sets the style of the bottom border border-style 4 1 6 2
border-bottom-width Sets the width of the bottom border thin
medium
thick
length
4 1 4 1
border-color Sets the color of the four borders, can have from one to four colors color 4 1 6 1
border-left A shorthand property for setting all of the properties for the left border in one declaration border-left-width
border-style
border-color
4 1 6 1
border-left-color Sets the color of the left border border-color 4 1 6 2
border-left-style Sets the style of the left border border-style 4 1 6 2
border-left-width Sets the width of the left border thin
medium
thick
length
4 1 4 1
border-right A shorthand property for setting all of the properties for the right border in one declaration border-right-width
border-style
border-color
4 1 6 1
border-right-color Sets the color of the right border border-color 4 1 6 2
border-right-style Sets the style of the right border border-style 4 1 6 2
border-right-width Sets the width of the right border thin
medium
thick
length
4 1 4 1
border-style Sets the style of the four borders, can have from one to four styles none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
4 1 6 1
border-top A shorthand property for setting all of the properties for the top border in one declaration border-top-width
border-style
border-color
4 1 6 1
border-top-color Sets the color of the top border border-color 4 1 6 2
border-top-style Sets the style of the top border border-style 4 1 6 2
border-top-width Sets the width of the top border thin
medium
thick
length
4 1 4 1
border-width A shorthand property for setting the width of the four borders in one declaration, can have from one to four values thin
medium
thick
length
4 1 4 1
AttachmentSize
24CSS_border_harjoituksia.odt131.31 KB