/

HTML / CSS / JavaScript Tutorial

CSS Property: border-style

[this page | pdf | back links]

The CSS (CSS1) border-style property sets the border style of an element’s four borders. The individual border styles can be set separately using border-bottom-style, border-left-style, border-right-style and border-top-style. As with some other aggregate edge properties, up to four parameter values can be supplied (and if more than one is supplied then the properties are applied to individual borders as described here).

 

Valid property values (other than inherit and initial) are shown here.

 

Default Value:

none

JavaScript syntax:

e.g. object.style.borderStyle="double dashed"

Inherited:

No

Animatable:

Yes

 

EXAMPLE:


HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
p {width: 200px; border: thin solid black;}
p.x1 {border-style: dashed;}
</style>
</head>
<body>
<p>1. Element with default property</p>
<p class="x1">2. Element set using in-file HTML style</p>
<p id="x2">3. Element set using JavaScript</p>
<p style="border-style: solid dashed dotted;">
4. impact of using a border-style parameter that involves three styles, solid, dashed, dotted</p>

<script>
document.getElementById("x2").style.borderStyle = "dashed";
</script>

</body>
</html>

FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedCSSPropertyBorderStyle() {
  var x = document.createElement("DIV"); x.style.borderStyle = "dashed"; return (window.getComputedStyle(x, null).borderStyle == "dashed");
}


NAVIGATION LINKS
Contents | Prev | Next | CSS Properties


Desktop view | Switch to Mobile