border-width

Overview

W3C

Properties

background

background-attachment

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


                                border-width: [ thin | medium | thick | <length> ]{1,4} | inherit

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

DOM
Example | length
Example | medium
Example | thick
Example | thin
Example | DOM
References


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

<html>
  <head>
    <title>border-width</title>
  </head>
  <body>
    <a href="/" onmouseover="mouseover1();">thin</a>
    <a href="/" onmouseover="mouseover2();">medium</a>
    <a href="/" onmouseover="mouseover3();">thick</a>
    <a href="/" onmouseover="mouseover4();">length</a><br>
    <a href="/" onmouseover="mouseover5();">top-right-bottom-left</a>
    <a href="/" onmouseover="mouseover6();">top-bottom right-left</a>
    <a href="/" onmouseover="mouseover7();">top right-left bottom</a>
    <a href="/" onmouseover="mouseover8();">top right bottom left</a>
    <h1 id="myid1">Header</h1>
    <p>paragraph</p>
  </body>
  <script type="text/javascript">
    function mouseover1() {
      document.getElementById("myid1").style.borderWidth = "thin";
    }
    function mouseover2() {
      document.getElementById("myid1").style.borderWidth = "medium";
    }
    function mouseover3() {
      document.getElementById("myid1").style.borderWidth = "thick";
    }
    function mouseover4() {
      document.getElementById("myid1").style.borderWidth = "1px";
    }
    function mouseover5() {
      document.getElementById("myid1").style.borderWidth = "thin";
    }
    function mouseover6() {
      document.getElementById("myid1").style.borderWidth = "thin thick";
    }
    function mouseover7() {
      document.getElementById("myid1").style.borderWidth = "thin thick medium";
    }
    function mouseover8() {
      document.getElementById("myid1").style.borderWidth = "thin thick medium medium";
    }
    document.getElementById("myid1").style.borderStyle = "solid";
  </script>
</html>

W3C Cascading Style Sheets, level 1

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

CSS

DOM

Example | length

Example | medium

Example | thick

Example | thin

Example | DOM

References