borderColor Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:borderColor

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. borderColor

Description

The borderColor property sets or gets the border's color.

This property can take from one to four values:

  • One value sets all four borders
  • Two values sets top and bottom border to the first value, left and right border to the second value
  • Three values sets top border to the first, left and right border to the second, bottom border to the last value
  • Four values sets top border to the first, right border to the second, bottom border to the third, left border to the fourth

Property Values

Value Description
color Set the color of the border.
transparent The color of the border is transparent
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Technical Details

Item Value
Default Value: black
Return Value: A String, representing the color of an element's border
CSS VersionCSS1

Get the color of the four borders of a <div> element

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<body>

<div id="myDiv" style="border:thick solid green">This is a div.</div>
<br>
<button type="button" onclick="myFunction()">Return border color</button>

<script>
function myFunction() {/*from  w  w  w  .  j a  va2s .  c  o  m*/
    console.log(document.getElementById("myDiv").style.borderColor);
}
</script>

</body>
</html>

Related Tutorials