| Style sheet for border properties |
|
|
|
|
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Borders</title>
<style type='text/css'>
.solid {border-style:solid; border-color:#000000; border-width:1px;}
.dotted {border-style:dotted; border-color:#999999; border-width:2px;}
.dashed {border-style:dashed; border-color:#666666; border-width:3px;}
.double {border-style:double;}
.groove {border-style:groove;}
.ridge {border-style:ridge;}
.inset {border-style:inset;}
.outset {border-style:outset;}
</style>
</head>
<body>
<p class="solid">This is a paragraph with a <code>solid</code> border</p>
<p class="dotted">This is a paragraph with a <code>dotted</code> border</p>
<p class="dashed">This is a paragraph with a <code>dashed</code> border</p>
<p class="double">This is a paragraph with a <code>double</code> border</p>
<p class="groove">This is a paragraph with a <code>groove</code> border</p>
<p class="ridge">This is a paragraph with a <code>ridge</code> border</p>
<p class="inset">This is a paragraph with an <code>inset</code> border</p>
<p class="outset">This is a paragraph with an <code>outset</code> border</p>
</body>
</html>
|
|
|
|
| Related examples in the same category |
| 1. | 'border' Example | | | | 2. | border width, border style shorthand four values | | | | 3. | border width, border style shorthand one value | | | | 4. | border width, border style shorthand, three values | | | | 5. | border width, border style shorthand two values | | | | 6. | border: thin solid rgb(0, 0, 0) | | | | 7. | border: 1em solid black | | | | 8. | border: medium solid black | | | | 9. | border: thin solid black | | | | 10. | border: 1px solid rgb(0, 0, 0); | | | | 11. | border: 1px solid crimson; | | | | 12. | border: 1px solid gold; | | | | 13. | border: 1px solid rgb(200, 200, 200); | | | | 14. | border-color: red green purple blue; border-width: thin medium thick .25cm; | | | | 15. | border overwrite | | | | 16. | Use border-bottom to draw line | | | | 17. | Dashed border | | | | 18. | border: 1px dashed #8a795d; | | | | 19. | Using image for border | | | | 20. | Border page border | | | | 21. | border: 1px solid green; | | | | 22. | When no border-color is specified, the border color is the value of the color property. | | | | 23. | border-style: solid dashed double inset; | | | | 24. | Border with default color | | | | 25. | border sets the size, pattern, and color of the border surrounding the padding. | | | | 26. | border: thick solid black | | | | 27. | Border shortcut setting | | | | 28. | border shortcut property takes three space-delimited values that represent the border's width, style, and color. | | | | 29. | border: 40px double black; creates a black, 40-pixel, double-line border. | | | | 30. | Border with specific setting for four directions | | | | 31. | This paragraph has a 1 pixel thick, solid black border around it. | | | | 32. | Border direction | | | | 33. | Set border to '3px dotted #33333;' | | | | 34. | Body border: 50px #666 ridge | | | | 35. | Add border for different columns together | | | | 36. | Combined style | | | | 37. | border:none is the default. | | | | 38. | Border's width cannot be negative because they are inside the margin. | | | | 39. | Use nested border | | | | 40. | border property, can be used to specify border-width, border-style, and border-color for all four sides at once. | | | | 41. | Border cascade | | |
|