Marusya's School Notes

Border-Top Shorthand

The shorthand property does not have to carry all three border properties. This example demonstrates a shorthand property with three, two or one property for the top border:

HTML file:	Displayed by browser:
<style> p.three { border-style: solid; border-top: 15px double #ff0000; } p.two { border-style: solid; border-top: 0.3em dotted; } p.two2 { border-style: solid; border-top: ridge skyblue; } p.one { border-style: solid; border-top: dashed; } </style> <body> <p class="three">This has a 15px wide double-line red top border.</p> <p class="two">This has a 0.3em wide dotted top border without color specified.</p> <p class="two2">This has a skyblue ridge border without width specified.</p> <p class="one">This a dashed line, but doesn't seem to work using only a width nor color.</p> </body>	This has a 15px wide double-line red top border. This has a 0.3em wide dotted top border without color specified. This has a skyblue ridge border without width specified. This a dashed line, but doesn't seem to work using only a width nor color.

HTML file:

Displayed by browser:

<body>
<p class="three">This has a 15px wide double-line red top border.</p>
<p class="two">This has a 0.3em wide dotted top border without color specified.</p>
<p class="two2">This has a skyblue ridge border without width specified.</p>
<p class="one">This a dashed line, but doesn't seem to work using only a width nor color.</p>
</body>

This has a 15px wide double-line red top border.

This has a 0.3em wide dotted top border without color specified.

This has a skyblue ridge border without width specified.

This a dashed line, but doesn't seem to work using only a width nor color.

Remember, to see a border, the border-style must be defined.