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