border-width: ***; border-***-width: ***;

Browser
  • IE
  • Cr
  • Sf
  • Fx
  • O

The border-width and border-***-width properties sets the border width of an element.
(*** = top, bottom, left, and right)

  • border-width : This is a shorthand property for setting the width for the four borders.
  • border-***-width : Sets the width of the top, bottom, left, and right borders.

div {
border-width: medium thin;
border-color: #000000;
border-style: solid;
}

p {
border-top-width: 3px;
border-right-width: 6px;
border-bottom-width: 9px;
border-left-width: 12px;
border-color: #000000;
border-style: solid;
}

border-width : This is a shorthand property for setting the width for the four borders.

Property Value Explanation
border-width thin, medium , thick, or length the top, bottom, left, and right borders

The default is "medium".

  • border-width: 5px; : [all sides] borders
  • border-width: 5px 10px; : [top, bottom] [left, right] borders
  • border-width: 5px 10px 15px; : [top] [left, right] [bottom] borders
  • border-width: 5px 10px 15px 20px; : [top] [right] [bottom] [left] borders

border-***-width : Sets the width of the top, bottom, left, and right borders.

Property Value Explanation
border-top-width thin, medium , thick, or length the top border
border-right-width thin, medium , thick, or length the right border
border-bottom-width thin, medium , thick, or length the bottom border
border-left-width thin, medium , thick, or length the left border

The default is "medium".

The thickness example

thin

medium

thick

1px

2px

3px

5px

10px

Example


<html>
<head>
<title>TAG index</title>

<style type="text/css">

h2, h3, span {
border-color: #2b2b2b;
border-style: solid;
}

.example1 {
border-width: thin;
}
.example2 {
border-top-width: 0;
border-right-width: 0;
border-bottom-width: 3px;
border-left-width: 10px;
}

</style>

</head>
<body>

<h2 class="example1">Specifies a thin border</h2>
<h3 class="example2">[top,right:0] [bottom:3px] [left:10px]</h3>
<p>Specifies a <span class="example1">thin</span> border</p>

</body>
</html>
Output

Specifies a thin border

[top,right:0] [bottom:3px] [left:10px]

Specifies a thin border