CSS Border

By | March 15, 2022

With the CSS border properties, we can define the different border styling to the HTML elements. Every HTML element represents a rectangular box structure and using the CSS border properties we can specify the border different formatting, colouring and dimensions.

CSS properties to style the HTML elements borders.

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

CSS border

The CSS border property is a shorthand property for border-width, border-style and border color, which means using the border property we can single handily set all these three properties.

Example

<!DOCTYPE html>
<html
<head>
  <title></title>
  <style type="text/css">
    p {
        border: 1px red dotted;   /* border width = 1px*  border-color= red  border-style= dotted /
    }
  </style>
</head>
<body>
 <p>This is a Paragraph </p>
</body>
</html>

Border Width

By default, the border width of every element is 0, which makes the border disappear, so its very important to define the border width of the element before defining any other border associated property.

Example

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    p {
        border-width: 2px solid;   /* border width = 2px solid */
        border-style: dotted;
  </style>
</head>
<body>
 <p>This is a Paragraph </p>
</body>
</html>

Set the border Color

By default, the border colour of every element is black, but due to zero width of default border, we cannot see the border exactly. The border-color property allows us to change the border colour of any HTML element.

Vamware

Example

 <!DOCTYPE html>
<html>
<head>
  <title></title>
    <style type="text/css">
    p {
        border: 2px solid;   /* border width = 2px solid */
        border-color: green;  /* setting the green border  for paragraph*/
    }
  </style></head>
<body>
 <p>This is a Paragraph </p>
</body>
</html>

<Note>: By default, the border-width is 0 which mean no border, so when we set border color or styling we need to set some width to the border.

Vamware

The border-color property set similar colour to all side of the element. But using the border-bottom-color, border-top-color, border-left-color, and border-right-color properties we can set different or similar colour for all four sides.

Example

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    p {
        border: 2px solid;   /* border width = 2px solid *
        border-bottom-color: green;
        border-top-color:red;
        border-left-color: orange;
        border-right-color: yellow;    }
  </style>
</head>
<body>
 <p>This is a Paragraph </p>
</body>
</html>

Border Style

The border-style property provides various styling to the element border. Using this property, we can change the default border rendering and make the simple border lines to dotted, dashed, outset, etc.

border-style values

Values Description
none No border
solid Single solid line as to represent each side of the border.
dotted Make the borderline dotted.
dashed Dashed lines to represent the border
double Two parallel solid lines to represent the border.
groove Make the border 3D
ridge It also makes a 3D border
inset It makes a box look border.
outset It looks like the element is coming out from a box.
hidden It is similar to the none value, but it is used for table elements.

border-style property has some subsidiary properties like border-bottom-style, border-top-style, border-left-style, and border-right-style to style different side of same element.

Vamware

Example

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    p {
        border: 2px solid;   /* border width = 2px solid */
        /*bordar line will be dashed*/
        border-style: dashed;}
  </style>
</head>
<body>
 <p>This is a Paragraph </p>
</body>
</html>

CSS border Quick Summary

  • The CSS border property is a shorthand for border-width, border-color, and border-style properties.
  • By default, the border width of every element is 0.
  • The default border colour of every element is black.
  • The border-style property defines the various style for borderlines.

People are also reading:

Author: Vinay Singh

I am a Full Stack Developer with a Bachelor's Degree in Computer Science, who also loves to write technical articles that can help fellow developers.

Leave a Reply

Your email address will not be published.