1. Introduction to CSS Borders
CSS borders help in adding an outline along the edges of HTML elements. Also, the outline may have some unique color or style, or even width. These types of outlines are named CSS borders. These CSS borders help in designing HTML elements. Therefore, CSS allows us to incorporate the CSS borders with different style, width and color to make the borders unique. For this purpose, we use the CSS border property. See a no of elements below with cool CSS borders:
.wrapper{
border: 1px solid #000000;
}
This element has border on all sides with black color and the border width is 2px.
The border on the left of this element with 10px width and red color.
This element has a border with 1px width and cyan color. Also, the border has rounded edges.
Moreover, there are different styles of the border like this element has a dotted border and two edges are rounded.
2. What are different CSS Borders Styles?
There are several border styles for CSS borders which we can specify using the border-style property. Importantly, we can define the border style by one to four values. The values are for the top border, right border, bottom border, and left border.
.page-header{
border-style: dotted;
border-width: 3px;
border-color: blue;
}
Below are all CSS border styles allowed:
- dotted: Defines a dotted border
- dashed: Defines a dashed border
- solid: It defines a solid border
- double: Creates a double border
- groove: Defines a 3D grooved border. The effect depends on the border-color value
- ridge: Defines a 3D ridged border. The effect depends on the border-color value
- inset: It makes a 3D inset border. The effect depends on the border-color value
- outset: Defines a 3D outset border. The effect depends on the border-color value
- none: There will be no border
- hidden: Defines a hidden border
Dotted border of this paragraph.
Dashed border of this paragraph.
A solid border of this paragraph.
A double border of this paragraph.
This paragraph has a groove border style.
Ridge border of this paragraph.
The border style is inset.
The border style is outset.
No border.
Combination of border styles for different sides of this paragraph.
Example
.dotted{border-style: dotted;}
.dashed{border-style: dashed;}
.solid{border-style: solid;}
.double{border-style: double;}
.groove{border-style: groove;}
.ridge{border-style: ridge;}
.inset{border-style: inset;}
.outset{border-style: outset;}
.hidden{border-style: hidden;}
.none{border-style: none;}
.combination1{border-style: dotted double groove ridge;}
.combination2{border-style: dashed solid outset hidden;}
Consider This:
Interestingly, if we specify only the border-style property, the browser will take the default values for border-width: 3px and border-color: black.
Furthermore, to specify any other property like border-color or border-width, we must specify border-style first.
2.1. CSS Borders Style for Individual Sides
While going through border style, it should also be clear that we can set border style for individual sides and that is the beauty of CSS borders property. Consider the below examples:
- If one value is set for border-style, all four sides will have the same border style.
- If two values are specified, the top and bottom side will have the same border style whereas the left and right sides have the same border style
- On having three values set for border-style, the first value will set for top, the second value for left and right while the third value will set the style for the bottom.
- Four values for border-style will set border-style for each side.
Example
.dotted{border-style: dotted;}
.one{border-style: dashed;}
.two{border-style: dashed dotted;}
.three{border-style: solid dashed dotted;}
.four{border-style: double solid dashed dotted;}
Note:
Like we specified the border-style for individual sides, similarly, we can set the border-color and border-width for individual sides too.
3. How to Define Width of CSS Borders?
Importantly, before specifying the width of the border, we must specify the border style. We can specify the width of the border by border-width property. The border-width property defines the width of all four sides of the border.
.page-header{
border-style: dotted;
border-width: 3px;
border-color: blue;
}
Likewise, to the CSS border style, border width can also be specified for individual sides of an element. Also, the border-width can be specified in any of the units like px, pt, cm, mm, in, em, etc. Furthermore, you can also define border width by three pre-defined values, which may be:
- Thin
- Medium
- Thick
Solid border of this paragraph with a border width of 5px.
Four sides have different border widths and solid border styles.
Thin Border Width
Medium Border Width
Thick Border Border Width
Example
.border-1 {
border-style: solid;
border-width: 5px;
}
.border-2{
border-style: dashed;
border-width: 2px 10px 4px 20px;
}
.border-3{
border-style: solid;
border-width: thin;
}
4. How to Define Colors For CSS Borders?
In the end, if we want to define the border color, we must set the border-style before. After that, we can set the border color by using the border-color property. Also, we can set a single border-color property of four different values each one for each side, similar to border-style and border-width properties.
.page-header{
border-style: dotted;
border-width: 3px;
border-color: blue;
}
Furthermore, we can set the border color by any of the color types like by name, hex value, etc. Understand CSS borders color property in below example:
Border color is Crimson, set by name.
Border color is set by the RGB value and is green.
The border is blue and set by the HEX value.
This border is set by the HSL value.
All different border colors
Example
.border-1 {
border-style: solid;
border-color: Crimson;
}
.border-2{
border-style: dashed;
border-color: rgb(0,255,0);
}
.border-3{
border-style: solid;
border-color: #0000ff;
}
.border-4{
border-style: solid;
border-color: hsl(10,40%, 90%);
}
.border-5{
border-style: solid;
border-color: Crimson DeepSkyBlue Black Orange;
}
Note:
If the border-color property is not set, it will inherit the color from its parent element.
5. CSS Borders Short-hand Property
CSS border-style, border-width, and border-color can be specified using a shorthand property called border. We do this to shorten the length of the code. The order to specify the border with shorthand property is as follows:
border: border-width border-style border-color;
Example
h2{
font-size: 25px;
color: blue;
font-family: 'Roboto', sans-serif;
border: 5px solid #29b6f6;
}