CSS border-width

Please Share On:

Definition:

The border-width property is used to define four sides of the border. The border-width values can be predefined as a thin, medium, or thick. Or it can be defined by custom choice in px, pt, cm, em, in, etc.

Here are some examples of using predefined border-width (thin, medium & thick).

*Note: Border-width property must always be defined together with border-style. Otherwise, the border-width property does not work if it is defined alone.

See the example below to understand more about the uses of border width. If you haven’t read about border-style yet, see first the property values of border styles that can be associated together with border width while defining border width.

Syntax:

p.thin{
   border-style: solid;
   border-width: thin;
}

p.medium{
   border-style: solid;
   border-width: medium;
}

p.thick{
   border-style: solid;
   border-width: thick;
}

Source Code:

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

    p.medium{
       border-style: solid;
       border-width: medium;
    }

    p.thick{
       border-style: solid;
       border-width: thick;
    }
    </style>
  </head>
  
	<body> 
	  <p class="thin">I am thin border.</p>
	  <br>
	  <p class="medium">I am medium border</p>
	  <br>
	  <p class="thick">I am thick border</p>
	</body>
</html>

Output :

I am thin border.

I am medium border

I am thick border

try it yourself

Now, let’s define border-width using px, pt, cm, em, in, mm, etc.

1) px

Syntax:

p.px{
   border-style: solid;
   border-width: 10px;
}

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    p.px{
       border-style: solid;
       border-width: 10px;
    }
    </style>
  </head>
  
  <body>
  	<p class="px">I am a border in pixels.</p>
  	<br>
  </body>
</html>

Output :

I am a border in pixels.

try it yourself

2) pt

Syntax:

p.pt{
   border-style: solid;
   border-width: 10pt;
}

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    p.pt{
       border-style: solid;
       border-width: 10pt;
    }
    </style>
  </head>
  
  <body>
    <p class="pt">I am a border in point.</p>
    <br>
  </body>
</html>

Output :

I am a border in point.

try it yourself

3) cm

Syntax:

p.cm{
   border-style: solid;
   border-width: 1cm;
}

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    p.cm{
       border-style: solid;
       border-width: 1cm;
    }
    </style>
  </head>
  
  <body>
    <p class="cm">I am a border in centimeter.</p>
    <br>
  </body>
</html>

Output :

I am a border in centimeter.

try it yourself

4) em

Syntax:

p.em{
   border-style: solid;
   border-width: 0.5em;
}

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    p.em{
       border-style: solid;
       border-width: 0.5em;
    }
    </style>
  </head>
  
  <body>
  	<p class="em">I am a border in em.</p>
  </body>
</html>

Output :

I am a border in em.

try it yourself

5) in

Syntax:

p.in{
   border-style: solid;
   border-width: 0.2in;
}

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    p.in{
       border-style: solid;
       border-width: 0.2in;
    }

    </style>
  </head>
  
  <body>
    <p class="in">I am a border in inch.</p>
    <br>
  </body>
</html>

Output :

I am a border in inch.

try it yoursefl

6) mm

Syntax:

p.mm{
   border-style: solid;
   border-width: 10mm;
}

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    p.mm{
       border-style: solid;
       border-width: 10mm;
    }
    </style>
  </head>
  
  <body>
    <p class="mm">I am a border in millimeters.</p>
  </body>
</html>

Output :

I am a border in millimeters.

try it yourself

Four different style borders:

Border can also be defined in four different styles and widths as follows.

Syntax:

p.four-different-style-border {
  border-style: solid dotted;
  border-width: 2px 10px 5px 20px;
}

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    p.four-different-style-border {
      border-style: solid dotted;
      border-width: 25px 10px 5px 20px;
    }
    </style>
  </head>

  <body>
  	<p class="four-different-style-border">I am four different width border.</p>
  </body>
</html>

Output :

I am four different width border.

try it yourself

Donate to support writers

You may be interested in the following topics:

Post Views: 717

1) px

2) pt

3) cm

4) em

5) in

6) mm

Four different style borders:

Leave a Reply Cancel reply

Copyright @2023. All Right Reserved.