CSS Border Color
The CSS-border-color property defined as it allows you to set the border color of a box or div of the element.
CSS-border-color property can be set as border-color, and also can set them individually for border-top-color, border bottom-color, border-right-color, and border-left-color.
means that If you want to specify or set a CSS-border-color for a few sides (not all sides).
you can use one or more of those properties as above color-property.
one thing more than in these case one thing more you will be the check that border-width is not 0 and that border-style is set to none or
hidden before the border is displayed.
Border-color same for all sides
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!doctype html> <title>Example</title> <style> .border { font-size: 14px; padding: 15px; border: 10px solid; border-color: green; } </style> <div class="border">The CSS border-color property defined as its allows you to set the border color of a box or div of the element.</div> |
In the example, you can see that border-color green which is shown in the output image and border width 10px
which is the solid border. border-color for four side same which is used green color. then all border-color decorated
with green color.
Border-color with two sides the same color
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!doctype html> <title>Example</title> <style> .border { font-size: 14px; padding: 15px; border: 10px solid; border-color: #FF5733 #ACFF33; } </style> <div class="border">The CSS border-color property defined as its allows you to set the border color of a box or div of the element.</div> |
As a result, in this example you can see that in out image the border color for top border and bottom border have the same color but for the left border and right border have the same colors, means that two border sides have the same color, top, and bottom border color is #FF5733 and left and right border color is #ACFF33 you can decorate all four border with two colors as seen in the above example.
Border-color with all four sides a different color
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!doctype html> <title>Example</title> <style> .border { font-size: 14px; padding: 15px; border: 10px solid; border-color: #FF5733 #ACFF33 #FFEC33 #A4971B; } </style> <div class="border">The CSS border-color property defined as its allows you to set the border color of a box or div of the element.</div> |
therefore, In the above example for border-color different for all four sides, you can see that all four borders have a different color, for color top border color#FF5733 right-border color #ACFF33bottom border-color #FFEC33 left border-color to #A4971Bhave a different color. means that you can decorate all four border with different color as according to your needs.
About Author
