With CSS border property, you can apply border along with specific color, style and width to any HTML element. In CSS border property you can specify three values for width, style and color. Where width sets all borders in numeric measurement or with a named value of thin, medium and thick. The second value style is used to set the style of the border and is set to a value of dashed, dotted, double, groove, hidden, inset, none, outset, ridge, or solid. The last value color is used to set the color of the border using a CSS color value.
As mentioned on border property you can apply border property for individual sides top, bottom, left and right with specifying values for them. There are border properties for each sides border-top, border-bottom, border-left and border-right respectively. You can specify values of border-width, border-style and border-color for border property of each sides.
In previous we have set border width, style and color for each sides top, bottom, left and right. If you have to apply border width only for those side without style and color, it is possible by using border width property for each sides. There are border width properties for individual sides, which are border-top-width, border-bottom-width, border-left-width and border-right-width. You can specify non-negative length or named value like medium, thick and thin value for each property.
border-top-width: non-negative length | thick| medium | thin | inherit
border-bottom-width: non-negative length | thick| medium | thin | inherit
border-left-width: non-negative length | thick| medium | thin | inherit
border-right-width: non-negative length | thick| medium | thin | inherit
As border width property for individual sides, you can specify border style property for each sides top, bottom, left and right without specifying width and color for individual sides. The border style properties for individual sides are border-top-style, border-bottom-style, border-left-style and border-right-style. You can specify named values like dashed, dotted, double, groove, hidden, inset, outset, ridge and solid along with inherit and none.
As border style property for individual sides, you can specify border color property for each sides top, bottom, left and right without specifying width and style for individual sides. If you have to apply border color only for those sides, it is possible by using border color property for each sides. There are border color properties for individual sides, which are border-top-color, border-bottom-color, border-left-color and border-right-color. You can specify any valid color value, transparent or inherit for value of each property.
border-top-color: color | transparent | inherit
border-bottom-color: color | transparent | inherit
border-left-color: color | transparent | inherit
border-right-color: color | transparent | inherit
You can make table border connected or separate by using CSS border property border-collapse which defines whether table cell borders are connected or separate. The default value for this property is separate, where each cell having a border with possible spacing. With the value of collapse, the borders appear to collapse on each other so that there is no more spacing between the borders.
Syntax: border-collapse: collapse | separate | inherit
Shuseel Baral is a web programmer and the founder of InfoTechSite has over 8 years of experience in software development, internet, SEO, blogging and marketing digital products and services is passionate about exceeding your expectations.