border-style

Overview

W3C

Properties

background

background-attachment

The border-style property is a shorthand property for setting border-top-style, border-right-style, border-bottom-style, and border-left-style.


                                border-style: [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4} | inherit

Initial:	none
Applies To:	all elements
Inherited:	no
Percentages:	NA
Media:	visual

DOM
Example | dashed
Example | dotted
Example | double
Example | groove
Example | hidden
Example | inset
Example | none
Example | outset
Example | ridge
Example | solid
Example | DOM
References


                                [window.]document.getElementById("element-id").style.borderStyle = "border-top-style border-right-style border-bottom-style border-left-style";

<html>
  <head>
    <title>border-style</title>
  </head>
  <body>
    <a href="/" onmouseover="mouseover1();">none</a>
    <a href="/" onmouseover="mouseover2();">hidden</a>
    <a href="/" onmouseover="mouseover3();">dotted</a>
    <a href="/" onmouseover="mouseover4();">dashed</a>
    <a href="/" onmouseover="mouseover5();">solid</a>
    <a href="/" onmouseover="mouseover6();">double</a>
    <a href="/" onmouseover="mouseover7();">groove</a>
    <a href="/" onmouseover="mouseover8();">ridge</a>
    <a href="/" onmouseover="mouseover9();">inset</a>
    <a href="/" onmouseover="mouseover10();">outset</a><br>
    <a href="/" onmouseover="mouseover11();">top-right-bottom-left</a>
    <a href="/" onmouseover="mouseover12();">top-bottom right-left</a>
    <a href="/" onmouseover="mouseover13();">top right-left bottom</a>
    <a href="/" onmouseover="mouseover14();">top right bottom left</a>
    <h1 id="id1">Header</h1>
    <p>paragraph</p>
  </body>
  <script type="text/javascript">
    function mouseover1() {
      document.getElementById("id1").style.borderStyle = "none";
    }
    function mouseover2() {
      document.getElementById("id1").style.borderStyle = "hidden";
    }
    function mouseover3() {
      document.getElementById("id1").style.borderStyle = "dotted";
    }
    function mouseover4() {
      document.getElementById("id1").style.borderStyle = "dashed";
    }
    function mouseover5() {
      document.getElementById("id1").style.borderStyle = "solid";
    }
    function mouseover6() {
      document.getElementById("id1").style.borderStyle = "double";
    }
    function mouseover7() {
      document.getElementById("id1").style.borderStyle = "groove";
    }
    function mouseover8() {
      document.getElementById("id1").style.borderStyle = "ridge";
    }
    function mouseover9() {
      document.getElementById("id1").style.borderStyle = "inset";
    }
    function mouseover10() {
      document.getElementById("id1").style.borderStyle = "outset";
    }
    function mouseover11() {
      document.getElementById("id1").style.borderStyle = "dotted";
    }
    function mouseover12() {
      document.getElementById("id1").style.borderStyle = "dotted dashed";
    }
    function mouseover13() {
      document.getElementById("id1").style.borderStyle = "dotted dashed solid";
    }
    function mouseover14() {
      document.getElementById("id1").style.borderStyle = "dotted dashed solid double";
    }
  </script>
</html>

W3C Cascading Style Sheets, level 1

W3C Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

CSS

DOM

Example | dashed

Example | dotted

Example | double

Example | groove

Example | hidden

Example | inset

Example | none

Example | outset

Example | ridge

Example | solid

Example | DOM

References