Marusya's School Notes

Border Style

This property always must be set in order to see a border on any element. These are the various styles that can be applied to a border:

HTML file:	Displayed by browser:
<style> p.none { border: 1px none #000000; } p.dotted { border: 1px dotted #000000; } p.dashed { border: 1px dashed #000000; } p.solid { border: 1px solid #000000; } p.double { border: 3px double #000000; } p.groove { border: 5px groove #98bf21; } p.ridge { border: 5px ridge #98bf21; } p.inset { border: 5px inset #98bf21; } p.outset { border: 5px outset #98bf21; } </style> <body> <p class="none">NONE: Defines no border. This is the same as the "hidden" value.<sup>*1</sup></p> <p class="dotted">DOTTED: Defines a dotted border</p> <p class="dashed">DASHED: Defines a dashed border</p> <p class="solid">SOLID: Defines a solid border</p> <p class="double">DOUBLE: Defines two borders. The width of the two borders are the same as the border-width value</p> <p class="groove">GROOVE: Defines a 3D grooved border. The effect depends on the border-color value</p> <p class="ridge">RIDGE: Defines a 3D ridged border. The effect depends on the border-color value</p> <p class="inset">INSET: Defines a 3D inset border. The effect depends on the border-color value</p> <p class="outset">OUTSET: Defines a 3D outset border. The effect depends on the border-color value</p> </body>	NONE: Defines no border. This is the same as the "hidden" value.^1 DOTTED: Defines a dotted border DASHED: Defines a dashed border SOLID: Defines a solid border DOUBLE: Defines two borders. The width of the two borders are the same as the border-width value GROOVE: Defines a 3D grooved border. The effect depends on the border-color value RIDGE: Defines a 3D ridged border. The effect depends on the border-color value INSET: Defines a 3D inset border. The effect depends on the border-color value OUTSET: Defines a 3D outset border. The effect depends on the border-color value ^1 In cases of a border collapse, the Hidden value has top priority while None has the lowest priority. In other words, collapsing an Hidden border with a Solid border will result in seeing no border at all. But collapsing a Solid border with a None border will give a collapsed border in Solid style.

HTML file:

Displayed by browser:

<body>
NONE: Defines no border. This is the same as the "hidden" value.*1
DOTTED: Defines a dotted border
DASHED: Defines a dashed border
SOLID: Defines a solid border
DOUBLE: Defines two borders. The width of the two borders are the same as the border-width value
GROOVE: Defines a 3D grooved border. The effect depends on the border-color value
RIDGE: Defines a 3D ridged border. The effect depends on the border-color value
INSET: Defines a 3D inset border. The effect depends on the border-color value
OUTSET: Defines a 3D outset border. The effect depends on the border-color value
</body>

NONE: Defines no border. This is the same as the "hidden" value.^*1

DOTTED: Defines a dotted border

DASHED: Defines a dashed border

SOLID: Defines a solid border

DOUBLE: Defines two borders. The width of the two borders are the same as the border-width value

GROOVE: Defines a 3D grooved border. The effect depends on the border-color value

RIDGE: Defines a 3D ridged border. The effect depends on the border-color value

INSET: Defines a 3D inset border. The effect depends on the border-color value

OUTSET: Defines a 3D outset border. The effect depends on the border-color value

^*1 In cases of a border collapse, the Hidden value has top priority while None has the lowest priority. In other words, collapsing an Hidden border with a Solid border will result in seeing no border at all. But collapsing a Solid border with a None border will give a collapsed border in Solid style.

I've added a 3px padding to all paragraphs.