In this article, we will learn about Borders in CSS. The Border property is used to give style, color, and width to the borders of HTML elements.

Types of Borders in CSS/Border Style

It defines the type of border that will display on the element.

There are the following types of border styles that you can use in CSS:

• none – Defines that there is no border in the element.
• hidden – Defines that there is a hidden border in the element.
• dotted – Defines that there is a dotted border in the element.
• dashed – Defines that there is a dashed border in the element.
• solid – Defines that there is a solid border in the element.
• double – Defines that there is a double border in the element.
• inset – Defines that there is a 3D inset border in the element. The effect of this property also depends on the border color.
• outset – Defines that there is a 3D outset border in the element. The effect of this property also depends on the border color.
• groove – Defines that there is a 3D grooved border in the element. The effect of this property also depends on the border color.
• ridge – Defines that there is a 3D ridged border in the element. The effect of this property also depends on the border color.

Example:

.none {
       border-style: none;
       }

.hidden {
       border-style: hidden;
       }

.dotted {
       border-style: dotted;
       }

.dashed {
       border-style: dashed;
       }

.solid {
       border-style: solid;
       }

.double {
       border-style: double;
       }

.inset {
       border-style: inset;
       }

.outset {
       border-style: outset;
       }

.groove {
       border-style: groove;
       }

.ridge {
       border-style: ridge;
       }

Output:

Border width

This property defines the width of the border that is applied to the element.

The width of the element can be specified using pre-defined values: thick, medium, or thin or using a specific size (like px, em, etc).

Example:

#para1 {
        border-style: solid;
        border-width: thin;
       }

#para2 {
        border-style: dashed;
        border-width: medium;
       }

#para3 {
        border-style: dotted;
        border-width: thick;
       }

#para4 {
        border-style: solid;
        border-width: 5px;
       }

Output:

In the above example, the width of the border is specified for all four sides. We can also specify the border width for each side specifically.

Example:

#para1 {
        border-style: solid;
        border-width: 8px 4px;  /* 8px on top and bottom, 4px on right and left*/
       }

#para2 {
        border-style: solid;
        border-width: 4px 8px;  /* 4px on top and bottom, 8px on right and left*/
       }

#para3 {
        border-style: solid;
        border-width: 12px 4px 8px;  /* 12px on top, 4px on right and left, and 8px on bottom*/
       }

#para4 {
        border-style: solid;
        border-width: 2px 4px 6px 8px;  /* 2px on top, 4px on right, 6px on bottom, 8px on left*/
       }

Output:

Hope this article will guide you to recognize all about the Types of borders and border width in CSS that you needed we will study further the Border in CSS in the next article and still if you have any problems or queries regarding this, post them in the comments section and we will be glad to assist you.