Border Color

The border-color property is used to set the color of the border. The color can be set by:

You can also set the border color to "transparent", which isn't common, due to browser support! If the border color is not set, it is inherited from the color property of the element.

HTML file: Displayed by browser:
<style>
p.one {
   border-style: solid;
   border-color: red;
}
p.two {
   border-style: solid;
   border-color: #98bf21;
}
p.three {
   border-style: solid;
   border-color: rgb(128,128,255);
}
</style>
<body>
<p class="one">This border is in solid red.</p>
<p class="two">This border is in groove Hex#98bf21.</p>
<p class="three">This border is in outset rgb(128,128,255).</p>
</body>

This border is in solid red.

This border is in solid Hex#98bf21.

This border is in solid rgb(128,128,255).






Good habit Note: The "border-color" property does not work if it is used alone. You must use the "border-style" property to set the borders first.

I've added a 3px padding to each bordered paragraph.

Back button Table of Contents Next button