Understanding Borders in CSS with Live Examples

Web designers need different types of borders around various elements in a web page e.g. text, pictures, videos etc. If you are learning HTML & CSS course then you can ignore borders. With the help of this property we can identify the border of the box and how it should look, here we are talking about the border which is representing an element. This property is used to identify the border of the box and how it should look, here the border of the box is representing an element.

There are three possible properties of the border:

⦁ Border-style: It specifies the style of the border by having different values whether it may be solid, dashed line, double line, or one of the other possible values
⦁ Border-color: It specifies the color of the border
⦁ Border-width: It specifies the width of a border
Different Border-Styles in CSS

⦁ Solid
It means single line (solid) border.
⦁ Dotted
 Border is formed by a sequence of the dotted line.
⦁ Dashed
short lines are used for Border.
⦁ None
It means border does not exist.
⦁ Inset

Border is in 3D.  The border looks like as it is fixed in the page by using this style of border.

⦁ Outset
This border-style is used to set the border in 3D. The border looks like as it falls out of the page by using it.
⦁ Double
Border is double lined.
⦁ Groove
Border is in 3D. It looks as it is cut up the page.
⦁ Ridge
It is opposite of groove.
⦁ Mix
Here border on each side is different.

Different Border-Colors in CSS

This property is used to set the color of the border which can be set by four different types:

The color of the border can be set by using different types:
⦁ name - specify a color name, like "blue"

.solid{
width: 300px;
border: 3px solid;
border-color: blue;
}


⦁ Hex - specify a hexadecimal value, like "#ff0000"

.solid{
width: 300px;
border: 3px solid;
border-color: #1f5dc1;
}


⦁ RGB - specify an RGB value (Combination of Red, Green, and Blue), like "rgb(255,0,0)"

.solid{
width: 300px;
border: 3px solid;
border-color: rgb(12, 242, 92);
}


⦁ Transparent – No border is there.

.solid{
width: 300px;
border: 3px solid;
border-color: transparent;
}

Different Border-Width in CSS

The border-width property specifies the width of the border.

We can use a specific unit for the width of a border and that units are (px, pt, cm, em, etc) or we can specify it by using any pre-defined value from three options: thin, medium, or thick.

⦁ Specifying width in pixels.
.solid{
width: 300px;
border: 3px solid blue;
}


⦁ Specifying width by using one of the pre-defined values: thin, medium, or thick.

.solid{
width: 300px;
border: medium solid yellow;
}
 

Different Border-Sides in CSS

By using border-width, we can give different width and color to the border by categorizing it in four types. Four types of the property i.e. bottom border, right border, top border, and the left border.

.solid{
width: 300px;
border-top: 2px solid #f0890a;
border-right: 3px dashed #ed4725;
border-bottom: 4px dotted #f0890a;
border-left: 5px double #ed4725;
}

Conclusion
CSS shorthand properties (properties which can have multiple values) are great, and border property is one of them. It is a great way to reduce the length of the code of a CSS document.
To become a master of CSS you should have a sound practical knowledge of each and every concept. For attaining such knowledge, you need to join an ideal training institute for HTML and CSS training.

Join Web Development Institute for enriching your skills and become a CSS Master with sound practical understanding.