Marusya's School Notes

Style, Color and Width Properties

Here are some borders to illustrate the usage of all three border properties:

HTML file:	Displayed by browser:
<style> p.one { border-style: solid; border-color: red; border-width: 3px; } p.two { border-style: groove; border-color: #98bf21; border-width: thick; } p.three { border-style: inset; border-color: rgb(128,128,255); border-width: 1.2em; } </style> <body> <p class="one">This border is 3px wide in solid style of red.</p> <p class="two">This border is thick width in groove style with Hex#98bf21 color.</p> <p class="three">This border is 1.2em wide in inset style with rgb(128,128,255) color.</p> </body>	This border is 3px wide in solid style of red. This border is thick width in groove style with Hex#98bf21 color. This border is 1.2em wide in inset style with rgb(128,128,255) color.

HTML file:

Displayed by browser:

<body>
<p class="one">This border is 3px wide in solid style of red.</p>
<p class="two">This border is thick width in groove style with Hex#98bf21 color.</p>
<p class="three">This border is 1.2em wide in inset style with rgb(128,128,255) color.</p>
</body>

This border is 3px wide in solid style of red.

This border is thick width in groove style with Hex#98bf21 color.

This border is 1.2em wide in inset style with rgb(128,128,255) color.

Each paragraph element has a 3px padding added to it.