border-right

The border-right property is a shorthand property for setting the width, style, and color of an element's right border.

Syntax
DOM
Example | color | color
Example | color | transparent
Example | style | dashed
Example | style | dotted
Example | style | double
Example | style | groove
Example | style | hidden
Example | style | inset
Example | style | none
Example | style | outset
Example | style | ridge
Example | style | solid
Example | width | length
Example | width | medium
Example | width | thick
Example | width | thin
Example | DOM
External

Syntax


            border-right: [ <border-width> || <border-style> || <'border-top-color'> ] | inherit

Initial:	medium, none, value of the color property
Applies To:	all elements
Inherited:	no
Percentages:	NA
Media:	visual

DOM


            [window.]document.getElementById("element-id").style.borderRight = "border-right-color border-right-style border-right-width";

Example | color | color

Example | color | transparent

Example | style | dashed

Example | style | dotted

Example | style | double

Example | style | groove

Example | style | hidden

Example | style | inset

Example | style | none

Example | style | outset

Example | style | ridge

Example | style | solid

Example | width | length

Example | width | medium

Example | width | thick

Example | width | thin

Example | DOM

<!doctype html>
<html>
<head>
  <script>
    function mouseover1() {
      document.getElementById("id1").style.borderRight = "red solid";
    }
    function mouseover2() {
      document.getElementById("id1").style.borderRight = "transparent solid";
    }
    function mouseover3() {
      document.getElementById("id1").style.borderRight = "none";
    }
    function mouseover4() {
      document.getElementById("id1").style.borderRight = "hidden";
    }
    function mouseover5() {
      document.getElementById("id1").style.borderRight = "dotted";
    }
    function mouseover6() {
      document.getElementById("id1").style.borderRight = "dashed";
    }
    function mouseover7() {
      document.getElementById("id1").style.borderRight = "solid";
    }
    function mouseover8() {
      document.getElementById("id1").style.borderRight = "double";
    }
    function mouseover9() {
      document.getElementById("id1").style.borderRight = "groove";
    }
    function mouseover10() {
      document.getElementById("id1").style.borderRight = "ridge";
    }
    function mouseover11() {
      document.getElementById("id1").style.borderRight = "inset";
    }
    function mouseover12() {
      document.getElementById("id1").style.borderRight = "outset";
    }
    function mouseover13() {
      document.getElementById("id1").style.borderRight = "solid thin";
    }
    function mouseover14() {
      document.getElementById("id1").style.borderRight = "solid medium";
    }
    function mouseover15() {
      document.getElementById("id1").style.borderRight = "solid thick";
    }
    function mouseover16() {
      document.getElementById("id1").style.borderRight = "solid 1px";
    }
  </script>
</head>
<body>
  <a href="/" onmouseover="mouseover1()">color</a>
  <a href="/" onmouseover="mouseover2()">transparent</a><br>
  <a href="/" onmouseover="mouseover3()">none</a>
  <a href="/" onmouseover="mouseover4()">hidden</a>
  <a href="/" onmouseover="mouseover5()">dotted</a>
  <a href="/" onmouseover="mouseover6()">dashed</a>
  <a href="/" onmouseover="mouseover7()">solid</a>
  <a href="/" onmouseover="mouseover8()">double</a>
  <a href="/" onmouseover="mouseover9()">groove</a>
  <a href="/" onmouseover="mouseover10()">ridge</a>
  <a href="/" onmouseover="mouseover11()">inset</a>
  <a href="/" onmouseover="mouseover12()">outset</a><br>
  <a href="/" onmouseover="mouseover13()">thin</a>
  <a href="/" onmouseover="mouseover14()">medium</a>
  <a href="/" onmouseover="mouseover15()">thick</a>
  <a href="/" onmouseover="mouseover16()">length</a>
  <h1 id="id1">border-right</h1>
</body>
</html>

External

W3C Cascading Style Sheets, level 1

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