borderStyle Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:borderStyle

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

Description

The borderStyle property sets or gets the style of an element's border.

This property can take from one to four values:

  • If one value is specified, it sets all four border sides.
  • If two values are specified, the first value sets the top and bottom border, while the second value sets the right and left sides border.
  • If three values are specified, the first value sets the top border, the second value sets the right and left border, and the third value applies to the bottom border.
  • If four values are specified, each value sets the border individually in the order of top, right, bottom, and left.

Property Values

Value Description
noneNo border will be displayed.
hidden Same as 'none'
dotted a series of dots.
dashed a series of short line segments i.e. dashes.
solid a single solid line.
double a two parallel solid lines.
groove Looks like carved into the canvas.
ridge opposite effect of 'groove'.
inset Looks like embedded in the canvas.
outset opposite effect of 'inset'.
initial Sets this property to its default value.
inherit takes the computed value of its parent element border-bottom-style property.

Technical Details

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

Get border to a <div> element:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<body>

<div id="myDiv" style="border-style:groove dotted;">This is a div.</div>
<br>
<button type="button" onclick="myFunction()">Return border style</button>

<script>
function myFunction() {//w  w  w  .  ja  va  2s. c  o  m
    console.log(document.getElementById("myDiv").style.borderStyle);
}
</script>

</body>
</html>

Related Tutorials