CSS Borders

The border property in CSS is used to specify the style, width and color of an element's border. There are three properties of borders :

1. border-color
2. border-style
3. border-width

1. border-color :

The border-color property is used to change the color of the border surrounding an element. Syntax :
 border-color: color_name;
We can also change the color of borders individually like border-top, border-bottom, border-left, border-right. Example :
<!DOCTYPE>
<html>
<head>
<title>Border-Color</title>
  <style>
    p.first {
      border: 1px solid;
      border-color: red;
    }
    p.second {
      border: 1px solid;
      border-top-color: red;
      border-bottom-color: blue;
      border-left-color: green;
      border-right-color: gray;
    }
  </style>
</head>
<body>
  <p class="first">Hello world This is The first Paragraph</p>
  <p class="second">Hello world This is The Second Paragraph</p>
</body>
</html>
Output :

Hello world This is The first Paragraph


2. border-style :

The border-style property is used to specifies different available border style to display. The available border style properties are as follows :

dotted : For defining a dotted border.
dashed : For defining a dashed border.
solid : For defining a solid border.
double : For defining a double border.
groove : For defining a 3D grooved border.
ridge : For defining a 3D ridged border.
inset : For defining a 3D inset border.
outset : For defining a 3D outset border.
hidden : For defining a hidden border.
none : For defining no borders.

Example :
<!DOCTYPE>
<html>
<head>
  <title>Border-Style</title>
</head>
<body>
  <p style="border-style: dotted;border-width: 3px;"> Border-Style : dotted </p>
  <p style="border-style: dashed;border-width: 3px;"> Border-Style : dashed </p>
  <p style="border-style: solid;border-width: 3px;"> Border-Style : solid </p>
  <p style="border-style: double;border-width: 3px;"> Border-Style : double </p>
  <p style="border-style: groove;border-width: 3px;"> Border-Style : groove </p>
  <p style="border-style: ridge;border-width: 3px;"> Border-Style : ridge </p>
  <p style="border-style: inset;border-width: 3px;"> Border-Style : inset</p>
  <p style="border-style: outset;border-width: 3px;"> Border-Style : outset</p>
  <p style="border-style: hidden;border-width: 3px;"> Border-Style : hidden</p>
  <p style="border-style: none;border-width: 3px;"> Border-Style : none</p>
</body>
</html>
Output :

Border-Style : dotted

Border-Style : dashed

Border-Style : solid

Border-Style : double

Border-Style : groove

Border-Style : ridge

Border-Style : inset

Border-Style : outset

Border-Style : hidden

Border-Style : none

The border-style property can have also one to four values starting from top border, right border, bottom border and left border. Example :
<!DOCTYPE>
<html>
<head>
  <title>Border-Style</title>
</head>
<body>
  <p style="border-style: dotted dashed solid double;border-width: 3px;">Border-Style with four values </p>
</body>
</html>
Output :

Border-Style with four values


3. border-width

The border-width property is used to specify the width of the four borders. The width can be set as a specific size like px, pt, cm, em etc or by using one of the three pre-defined values: thin, medium, or thick. Example :
<!DOCTYPE>
<html>
<head>
  <title>Border-Style</title>
  <style>
    p { 
      border-style: solid; 
      border-bottom-width: 4px;
      border-top-width: 4px;
      border-right-width: 3px;
      border-left-width: 3px;
    }
  </style>
</head>
<body>
  <p> Border-Style with four values </p>
</body>
</html>
Output :

Border-Style with four values

The border-width property can have from one to four values for the top border, right border, bottom border and left border. Example :
<!DOCTYPE>
<html>
<head>
  <title>Border-Style</title>
  <style>
    p {
      border-style: solid; 
      border-width: 4px 3px 4px 3px;
    }
  </style>
</head>
<body>
  <p> Border-Style with four values </p>
</body>
</html>
Output :

Border-Style with four values


Next Topic :