KOMPOOS.NL

borders css

home » css » boxen-en-borders » borders.html

sitemap


maak stylesheets voor jouw css borders

Om door W3C gevalideerd te kunnen worden mag er geen "opmaak" in de html-code staan. De enige juiste procedure is, om via een stylesheet, tags, headers, div's etc. van een class of id te voorzien, die bepaalt welke border er voor welk item gebruikt zal worden. Hieronder staat een voorbeeld-stylesheet, en daar weer onder staan er een paar voorbeelden van de beschikbare borders met de bijbehorende html-regel. De stylesheet moet in de head-sectie van de pagina geplaatst worden en de html-code in de body-sectie.

voorbeeld stylesheet voor borders (en een slant)


<style type="text/css">
	.border_none{border:none}
	.border_solid{border:solid 4px #00aaaa}
	.border_dotted{border:dotted 4px #00aaaa}
	.border_dashed{border:dashed 4px #00aaaa}
	.border_double{border:double 4px #00aaaa}
	.border_inset{border:inset 4px #00aaaa}
	.border_outset{border:outset 4px #00aaaa}
	.border_meer_kleuren{border-top:solid 3px red;border-right:solid 3px pink;border-bottom:solid 3px blue;border-left:solid 3px yellow}
	.slant{border-color:red yellow red yellow;border-style:solid;width:0;height:0;line-height:0}
	.afmeting_slant {border-width:81px}
</style>

border-voorbeeld 1

<img class="border_solid" src="border.jpg" width="160" height="240" />


border-voorbeeld 2

<img class="border_dotted" src="border.jpg" width="160" height="240" />


border-voorbeeld 3

<img class="border_dashed" src="border.jpg" width="160" height="240" />


border-voorbeeld 4

<img class="border_double" src="border.jpg" width="160" height="240" />


border-voorbeeld 5

<img class="border_inset" src="border.jpg" width="160" height="240" />


border-voorbeeld 6

<img class="border_outset" src="border.jpg" width="160" height="240" />


border-voorbeeld 7

<img class="border_meer_kleuren" src="border.jpg" width="160" height="240" />


<p class="slant afmeting_slant"></p>

Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.