Marusya's School Notes

Style Individual Sides

In CSS, it is possible to specify different borders for different sides:

HTML file:	Displayed by browser:
<style> p.demo1 { border-top-style: dotted; border-right-style: solid; border-bottom-style: dashed; border-left-style:groove; } p.demo2 { border-style: dotted solid dashed; } p.demo3 { border-style: dotted solid; } p.demo4 { border-style: dotted; } </style> <body> <p class="demo1">DEMO 1: Every side has a different style. This declaration is done the long way.</p> <p class="demo2">DEMO 2: This declaration is done the shorthand way, defining three values for top, right and bottom. The fourth value (left side) takes on the same value as the opposite side (right side). </p> <p class="demo3">DEMO 3: This declaration is done the shorthand way, defining two values for the top and right sides. The other two side (bottom and left) assume the same values as the side opposite to it (top and right, respectively).</p> <p class="demo4">DEMO 4: This declaration is done the shorthand way, using only one value for all four sides. </p> </body>	DEMO 1: Every side has a different style. This declaration is done the long way. DEMO 2: This declaration is done the shorthand way, defining three values for top, right and bottom. The fourth value (left side) takes on the same value as the opposite side (right side). DEMO 3: This declaration is done the shorthand way, defining two values for the top and right sides. The other two side (bottom and left) assume the same values as the side opposite to it (top and right, respectively). DEMO 4: This declaration is done the shorthand way, using only one value for all four sides.

HTML file:

Displayed by browser:

<body>
<p class="demo1">DEMO 1: Every side has a different style. This declaration is done the long way.</p>
<p class="demo2">DEMO 2: This declaration is done the shorthand way, defining three values for top, right and bottom. The fourth value (left side) takes on the same value as the opposite side (right side). </p>
<p class="demo3">DEMO 3: This declaration is done the shorthand way, defining two values for the top and right sides. The other two side (bottom and left) assume the same values as the side opposite to it (top and right, respectively).</p>
<p class="demo4">DEMO 4: This declaration is done the shorthand way, using only one value for all four sides. </p>
</body>

DEMO 1: Every side has a different style. This declaration is done the long way.

DEMO 2: This declaration is done the shorthand way, defining three values for top, right and bottom. The fourth value (left side) takes on the same value as the opposite side (right side).

DEMO 3: This declaration is done the shorthand way, defining two values for the top and right sides. The other two side (bottom and left) assume the same values as the side opposite to it (top and right, respectively).

DEMO 4: This declaration is done the shorthand way, using only one value for all four sides.

I've adding a 3px padding to both bordered paragraphs.