You are currently viewing Borders in CSS | Web Development

Borders in CSS | Web Development

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.

This is a paragaraph with borders on all sides

This is a paragaraph with blue border on top side

This is a paragaraph with rounded borders on all sides

This is a paragaraph with green border on left side

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:

This is a paragraph with solid thick border

This is a paragraph with solid thick border

This is a paragraph with solid thick border

This is a paragraph with solid thick border

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:

This is a paragraph with solid thick border

This is a paragraph with solid thick border

This is a paragraph with solid thick border

This is a paragraph with solid thick border

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

This Post Has 2 Comments

Leave a Reply