border-width - HTML CSS CSS Property

HTML CSS examples for CSS Property:border-width

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. border-width

Description

The border-width CSS property is a shorthand property for setting the individual border.

The following table summarizes the border-width Property.

Item Value
Default value: medium
Applies to:All elements
Inherited: No
Animatable: Yes.

Syntax

The syntax of the property is as follows: 

border-width     [ thin | medium | thick | length ] 1 to 4 values | inherit

This shorthand notation can take one, two, three, or four whitespace separated values.

  • If one value is specified, it sets all border sides.
  • If two values are specified, the first value sets the top and bottom border, while the second value sets the right and left border.
  • If three values are specified, the first value sets the top border, the second value sets the right and left border, and the third value sets the bottom border.
  • If four values are specified, each value sets the border one by one in the order of top, right, bottom, and left.

Property Values

The following table describes the values of this property.

Value Description
thinA thin border.
medium A medium border.
thick A thick border.
length A length value in px, pt, cm, em, etc. Negative values are not allowed.
inherit take the value of its parent element border-width property.

The example below shows the border-width property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS border-width property</title>
  <style type="text/css">
      p.one {<!--from  w w  w  .j  a  va 2s .co  m-->
          border-style: solid;
          border-width: 5px;
      }
      p.two {
          border-style: solid;
          border-width: 5px 10px;
      }
      p.three {
          border-style: solid;
          border-width: 5px 10px 15px;
      }
      p.four {
          border-style: solid;
          border-width: medium 10px thick 15px;
      }
  </style>
 </head>
 <body>
  <p class="one"><strong>one-value syntax:</strong>.</p>
  <p class="two"><strong>two-value syntax:</strong>.</p>
  <p class="three"><strong>three-value syntax:</strong>.</p>
  <p class="four"><strong>four-value syntax:</strong>.</p>
 </body>
</html>

Related Tutorials