CSS border: Border in css in details

CSS border Property:

CSS border

With the help of CSS border property, we can customize the borders around HTML elements. This property is a combination of three other properties such as border-width, border-style, and border-color.

Actually it’s a shorthand property to set individual border property values in a single place. With the help of this property, we can set the width, color, and style of each border.

Syntax:

border: border-width border-style border-color|initial|inherit;

There are mainly three border properties are available:

  • The border-color is used to specifies the color of a border.
  • The border-style is used to specifies whether a border should be solid, dashed line, double line, or one of the other possible values.
  • The border-width is used to specifies the width of a border.

Let’s see how to use these properties with examples.

CSS border color:

With the help of CSS border-color property, we can change the color of the border that is surrounding an element. Using this property we can individually change the color of the top side border, left side border, bottom side border, right side border.

  • border-bottom-color is used to change the color of the bottom border.
  • border-top-color is used to change the color of the top border.
  • border-left-color is used to change the color of the left border.
  • border-right-color is used to change the color of the right border.

Let’s see an example using these above properties.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css border color</title>
      <style type = "text/css">
         p.fistP {
            border:1px solid;
            border-bottom-color:#00FFFF; /* Aqua  */
            border-top-color:#FFE4C4;    /* Bisque  */
            border-left-color:#000000;   /* Black */
            border-right-color:#A52A2A;  /* Brown  */
            color: #DC143C;
            width: 30%;
         }
         p.secondP {
            border:1px solid;
            border-color:#7FFF00;        /* Chartreuse  */
            color: #DC143C;
            width: 30%;
         }
      </style>
   </head>
<body>
      <p class = "fistP">
         This is first paragraph.
      </p>
      
      <p class = "secondP">
         This is second paragraph.
      </p>
   </body>
</html>

Output:

CSS border color

CSS Border Style:

Using CSS border-style property we can set the line style for all four sides of an element’s border.

Let’s see the different border styles:

The CSS border-style property may take one of the following values: nonesoliddotteddasheddoublegrooveridgeinset, outset and hidden.

  • none − It defines no border.
  • solid − It defines a single solid line.
  • dotted − It defines a series of dots.
  • dashed − It defines a series of short lines.
  • double − It defines two solid lines.
  • groove − It defines a 3D grooved border.
  • ridge − It defines a 3D ridged border.
  • inset − It defines a 3D inset border. The effect totally depends on the border-color value.e.
  • outset − It defines a 3D outset border. The effect totally depends on the border-color value.
  • hidden − It defines a hidden border. Same as none.

We can individually change the style of the top border, bottom border, left, and right borders of an element using the following properties −

  • border-bottom-style it is used to change the style of the bottom border.
  • border-top-style it is used to change the style of the top border.
  • border-left-style it is used to change the style of the left border.
  • border-right-style it is used to change the style of the right border.

Let’s see an example using border-style property:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CSS border-style property</title>
    <style>
        h5 {
	  border-width: 3px;
	}
	h5.none {
	  border-style: none;
	}
	h5.dotted {
	  border-style: dotted;
	}
	h5.dashed {
	  border-style: dashed;
	}
	h5.solid {
	  border-style: solid;
	}
	h5.double {
	  border-style: double;
	}
	h5.groove {
	  border-style: groove;
	}
	h5.ridge {
	  border-style: ridge;
	}
	h5.inset {
	  border-style: inset;
	}
	h5.outset {
	  border-style: outset;
	}
      </style>
</head>
<body>
    <h2>Example of border style.</h2>
    <h5 class="none">There is no border.</h5>
    <h5 class="dotted">Using dotted border style.</h5>
    <h5 class="dashed">Using dashed border style.</h5>
    <h5 class="solid">Using solid border style.</h5>
    <h5 class="double">Using double border style.</h5>
    <h5 class="groove">Using groove border style.</h5>
    <h5 class="ridge">Using ridge border style.</h5>
    <h5 class="inset">Using inset border style.</h5>
    <h5 class="outset">Using outset border style.</h5>
</body>
</html>

It will produce the following Out−

CSS Border Width:

Using CSS border-width property we can specify the width of the border area. border-width property is a shorthand property for setting the width of all the four sides of an element’s border at the same time.

We can individually change the width of the border-top, border-bottom, border-left, and right borders of an element using the following properties −

  • border-bottom-width is used to change the width of the bottom side border.
  • border-top-width is used to change the width of the top side border.
  • border-left-width is used to change the width of the left side border.
  • border-right-width is used to change the width of the right side border.

Let’s see an example using this border-width property that we describe above−

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Border with property</title>
</head>
<style>
  body{
     width:500px;
   }
  p{
   border-color:green;
   color:red;
 }
</style>
</head>
   <body>
      <p style = "border-width:5px; border-style:solid;">
         This is solid border and its width is 5px.
      </p>
      <p style = "border-width:thick; border-style:solid;">
         This is a solid border and its width is thick.
      </p>
      <p style = "border-width:5pt; border-style:solid;">
         This is a solid border and its width is 5pt.
      </p>
      <p style = "border-width:medium; border-style:solid;">
         This is a solid border and its width is medium;
      </p>
      <p style = "border-width:thin; border-style:solid;">
         This is a solid border and its width is thin.
      </p>
      <p style = "border-bottom-width:4px;border-top-width:10px;
         border-left-width: 2px;border-right-width:15px;border-style:solid;">
         This is a another border with four different types of width.
      </p>
    </body>
</html>

Output:−

CSS Border Style

Border Properties Using Shorthand:

There are many properties that we have to consider while dealing with CSS the border property. Sometimes using these properties and remembering all become a bit lengthy for us.

To make it short, now it’s easy to remember and now we can use border shorthand property. Now all the individual border properties can be specified into one.

Now one can use it for the following individual properties:

  • border-width
  • border-style
  • border-color

Syntax:-

border: 2px solid red;
Let’s see an example blew.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Border Properties Using Shorthand</title>
	<style>
            p{
	      border:4px solid red;
	      width: 400px;
	      color:blue;
	    }
    </style>
</head>
   <body>
      <p>
         This example is showing shorthand property for border.
      </p>
   </body>
</html>

Output −

Supported Browsers: 

  • Internet Explorer 4.0
  • Google Chrome Browser 1.0
  • Firefox Browser 1.0
  • Apple Safari Browser 1.0
  • Opera Mini Browser 3.5
Close