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 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.
Pingback: Borders in CSS - II | Web Development - Developers Dome
Pingback: Box Model in CSS | Web Development - Developers Dome