The border property is a shorthand for all the border properties. It defines the color, width and style for all the four sides of an element's border.
Syntax:
border: border-width border-style border-colorAbove mentioned is the most commonly used border property format to add borders to your HTML elements. Like we did to this paragraph.
Example:
#red-border {
border: 1px solid red;
}But border can be implemented using the properties individually as well. Let's learn about these 3 border properties and how to use them.
border-styleThis property is used to set a border around an element. There are multiple border styles supported like:
This is dashed border
This is dotted border
This is groove border
Example:
#dashed-border {
border-style: dashed;
}
#dotted-border {
border-style: dotted;
}
#groove-border {
border-style: groove;
}border-widthThis property sets border width in numeric values or by named values of thin, medium or thick. Width of the border can also be adjusted using the independent property border-width
This is a thick dashed border
Example
#dashed-border {
border-style: dashed;
border-width: 6px;
}border-color:This property sets the color of the border using a color value. Color value can be a Hexa code, RGB value or a valid color name.
This is a thick dashed red border
Example
#dashed-border {
border-style: dashed;
border-width: 6px;
border-color: red;
}We can also provide, 4 different color in one border-color rule, to set different color for all 4 sides of the border.
This is a thick dashed colorful border
Example
#dashed-border {
border-style: dashed;
border-width: 6px;
border-color: red blue green yellow;
}4 different color values, for top, right, bottom and left, in the same order. If you provide 2 different color names, then the first color will be set for top and bottom border and the second color will be set for left and right. Go try it!
This is compatible with CSS1, CSS2 and CSS3 along with following Web Browsers,
This property determines whether table cells are connected or separate.
Syntax:
border-collapse: collapse | separate | inheritThe default value is separate, each cell has a border with some spacing. If it is set to collapse, there is just one border for the whole element.
This property is mostly used to style a <table>.
This property defines the spacing between the cells in a table. Again, this property is also used with tables in HTML.
Syntax:
border-spacing: non-negative length | inheritIf one length is mentioned, it gives both horizontal and vertical spacing. If explicitly two values are defined, the first value gives horizontal spacing while the second value gives the vertical spacing.
As we have learned above, we can easily set border around an element using border-style property, change the thickness of the border using the border-width property and give it a color using the border-color property.
Now, we can also use these three properties to set border on any one side as well. All we have to do is append the name of the side in between:
For example: To add border just at the bottom, use the properties border-bottom-style, border-bottom-width, border-bottom-color
I have a dotted border just at the bottom
Example
#dashed-border {
border-bottom-style: dotted;
border-bottom-width: 4px;
border-bottom-color: blue;
}and the same can be written in a shorthand way as follows:
border-bottom: dotted 4px blueSimilar to border-bottom, border properties can be set individually for top, right and left. For setting the top border, you can use
For setting the right border, you can use
For setting the left border, you can use
Phew! That's a lot of properties. But practice makes a man perfect. Next up is Tables! Good Luck!
