Border-width

In this chapter we will learn how to use border-width property.

CSS border-width property is used to set the width for an element which has four borders around. We can use from one to four values for this property.

We have to define border-style property before using border-width just because we need borders before setting its width.

CSS Syntax

border-width: medium | thin | thick | length | initial | inherit;

Let's see an example:

<!DOCTYPE html>
<html>
   <head>
       <style>
          .thin {
               border-style: solid;
               border-width: 1px;
          }

         .thick {
             border-style: dashed;
             border-width: medium;
         }

        .thicker {
            border-style: outset;
            border-width: 6px;
       }

      </style>
   </head>
   <body>

        <p class="thin">This paragraph's border is selected as 1px.</p>
        <p class="thick">This paragraph's border is selected as medium.</p>
        <p class="thicker">This paragraph's border is selected as 6px.</p>

   </body>
</html>

Here the result is:

Property Values

Value Descriptions
medium It defines medium border. It is the default value of this property.
thin It defines thin border.
thick It defines thick border.
length It is used to set the thickness of the border.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.


Prev
Next