W3Schools.com

Style borderStyle Property

Style Object Reference Style Object

Definition and Usage

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

This property can take from one to four values:

  • One value, like: p {border-style: solid} - all four borders will be solid
  • Two values, like: p {border-style: solid dotted} - top and bottom border will be solid, left and right border will be dotted
  • Three values, like: p {border-style: solid dotted double}- top border will be solid, left and right border will be dotted, bottom border will be double
  • Four values, like: p {border-style: solid dotted double dashed} - top border will be solid, right border will be dotted, bottom border will be double, left border will be dashed

Syntax

Set the borderStyle property:

Object.style.borderStyle="value"

Return the borderStyle property:

Object.style.borderStyle

Value Description
none Defines no border. This is default
hidden The same as "none", except in border conflict resolution for table elements
dotted Defines a dotted border
dashed Defines a dashed border
solid Defines a solid border
double Defines two borders. The width of the two borders are the same as the border-width value
groove Defines a 3D grooved border. The effect depends on the border-color value
ridge Defines a 3D ridged border. The effect depends on the border-color value
inset Defines a 3D inset border. The effect depends on the border-color value
outset Defines a 3D outset border. The effect depends on the border-color value
inherit The style of the border is inherited from the parent element

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The borderStyle property is supported in all major browsers.

Note: The value "inherit" is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports "inherit".

Example

Example

Change the style of the four borders:

<html>
<head>
<style type="text/css">
#ex1
{
border: thick solid #FF0000;
}
</style>
<script type="text/javascript">
function displayResult()
{
document.getElementById("ex1").style.borderStyle="dotted double";
}
</script>
</head>
<body>

<div id="ex1">This is some text.</div>
<br />
<button type="button" onclick="displayResult()">Change style of the four borders</button>

</body>
</html>

Try it yourself »

Style Object Reference Style Object
WEB HOSTING
Best Web Hosting
PHP MySQL Hosting
Best Hosting Coupons
UK Reseller Hosting
Cloud Hosting
Top Web Hosting
$3.98 Unlimited Hosting
Premium Website Design
WEB BUILDING
XML Editor - Free Trial!
FREE Website BUILDER
Best Website Templates Top CSS Templates
CREATE HTML Websites
EASY WEBSITE BUILDER
W3SCHOOLS EXAMS
Get Certified in:
HTML, CSS, JavaScript, XML, PHP, and ASP
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
STATISTICS
Browser Statistics
Browser OS
Browser Display
SHARE THIS PAGE