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.
Syntax: border: border-width border-style border-color
Example: p {border: 2px double red;}
How to Apply Border for Individual Sides
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.
Syntax:
border-top: border-width border-style border-color
border-bottom: border-width border-style border-color
border-left: border-width border-style border-color
border-right: border-width border-style border-color
Example:
#topborder {border-top: thin dashed blue;}
#bottomborder {border-bottom:thick dotted brown;}
#leftborder {border-left: medium groove pink;}
#rightborder {border-right: 2px double red;}
Demo:
How to Set Border Width for 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.
Syntax:
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
Example:
#topwidth { border-top-width: 2px;border-top-style:solid;}
#bottomwidth {border-bottom-width: thick;border-bottom-style:solid;}
#leftwidth {border-left-width: medium;border-left-style:solid;}
#rightwidth {border-right-width: thin;border-right-style:solid;}
Demo:
How to Set Border Style for Each Sides
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.
Syntax:
border-top-style: dashed | dotted | double | groove | inherit | hidden | inset | none | outset | ridge | solid
border-bottom-style: dashed | dotted | double | groove | inherit | hidden | inset | none | outset | ridge | solid
border-left-style: dashed | dotted | double | groove | inherit | hidden | inset | none | outset | ridge | solid
border-right-style: dashed | dotted | double | groove | inherit | hidden | inset | none | outset | ridge | solid
Example:
#topstyle { border-width: thick; border-top-style:solid;}
#bottomstyle { border-width:thick; border-bottom-style:dashed;}
#leftstyle { border-width:thick; border-left-style:double;}
#rightstyle {border-width:thick; border-right-style:groove;}
Demo:
How to Apply Border Color for Each Sides
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.
Syntax:
border-top-color: color | transparent | inherit
border-bottom-color: color | transparent | inherit
border-left-color: color | transparent | inherit
border-right-color: color | transparent | inherit
Example:
#topcolor {border-width: thick; border-style:solid; border-top-color: red;}
#bottomcolor {border-width: thick; border-style:solid;border-bottom-color: blue;}
#leftcolor {border-width: thick; border-style:solid;border-left-color:brown;}
#rightcolor {border-width: thick; border-style:solid;border-right-color:green;}
Demo:
How Collapse or Separate Border Spacing
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
Example: #collapse {border-collapse: collapse;}
#separate {border-collapse: separate;}
Demo:
Related Posts:
How to make rounded corners border using CSS
How to Create Custom CSS Template for Printing
How to Create Responsive Website or Blogger Template
How To Make Simple CSS Stylesheet for a Website ?
How To Create Simple Menu Using CSS ?
How to Style Webpages Using Basic and Core CSS Selectors
How to Design Webpages using CSS Attribute Selectors
How to Select Particular Portion of an HTML Document Using CSS
How to Style Multiple Sections of an HTML Document Using CSS
How To Set Background Image or Color Using CSS
Post a Comment