Marusya's School Notes

Border-Left Shorthand

This example demonstrates how to set the width of the left border, as well as styling that border:

HTML file:	Displayed by browser:
<style> p.wide { border-style: solid; border-left-width: 15px; } p.color { border-style: solid; border-left: medium double skyblue; } </style> <body> <p class="wide">This has a 15px left border without color or style. It takes on the solid style specified by the border-style property. </p> <p class="color">This medium wide left border is a set of double lines in skyblue.</p> </body>	This has a 15px left border without color or style. It takes on the solid style specified by the border-style property. This medium wide left border is a set of double lines in skyblue.

HTML file:

Displayed by browser:

<body>
<p class="wide">This has a 15px left border without color or style. It takes on the solid style specified by the border-style property. </p>
<p class="color">This medium wide left border is a set of double lines in skyblue.</p>
</body>

This has a 15px left border without color or style. It takes on the solid style specified by the border-style property.

This medium wide left border is a set of double lines in skyblue.

Note: The "border-left-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.