Working with the CSS Border
The border shorthand property allows you to set the width, style, and color of an element’s border in a single declaration.
You need to provide three values:
border-width: Specifies the width of the border (such as1px,medium,thick).border-style: Defines the style of the border (likesolid,dashed,dotted, ornone).border-color: Sets the color of the border (such as#000,red, orrgb(255, 0, 0)).
The syntax for the CSS border shorthand property is as follows:
border: 2px solid #000;-
border: This shorthand property ↗ sets the width, style, and color of all four borders of an element in one declaration.border: 2px solid #000;css -
border-width: Specifies the width of the border. You can set different values for each side (top, right, bottom, left) or a single value for all sides.border-width: 5px; /* all sides */border-width: 5px 10px 15px 20px; /* top, right, bottom, left */css -
border-style: Defines the style of the border, such as solid, dashed, dotted, double, groove, ridge, inset, or outset.border-style: solid; /* solid border */border-style: dashed; /* dashed border */css -
border-color: Sets the color of the border. You can specify different colors for each side or a single color for all.border-color: red; /* all sides */border-color: red green blue yellow; /* top, right, bottom, left */css -
border-top,border-right,border-bottom,border-left: These properties allow you to apply styles to individual borders (top, right, bottom, left).border-top: 2px solid black;border-right: 3px dashed green;css -
border-radius: Rounds the corners of an element’s border. You can specify one value for all corners or individual values for each corner.border-radius: 10px; /* all corners */border-radius: 10px 20px 30px 40px; /* top-left, top-right, bottom-right, bottom-left */css -
border-image: This property allows you to use an image as the border of an element. It includes several sub-properties, such asborder-image-source,border-image-slice, andborder-image-repeat.border-image: url(border-image.png) 30 round;css
-
Basic Example
border: 2px solid black;css2pxis the width of the border.solidis the border style.blackis the color of the border.
-
Border with Only Width and Style
border: 3px dashed;css3pxis the width.dashedis the style, and the default border color (usuallyblack) will be used.
-
Border with Only Style
border: solid;csssolidis the style. If you omit width and color, the default width will bemedium(typically3px) and the default color will beblack.
-
Border with Width and Color Only
border: 5px red;css5pxis the width.redis the color. The default style issolid.
| Property | Description | Example |
|---|---|---|
border | Shorthand property for setting border-width, border-style, and border-color together. | border: 2px solid #000; |
border-width | Specifies the width of the border. Can be set for all sides or individually. | border-width: 5px 10px 15px 20px; |
border-style | Defines the style of the border (solid, dashed, dotted, etc.). | border-style: dashed; |
border-color | Sets the color of the border. Can be set for all sides or individually. | border-color: red green blue yellow; |
border-top | Specifies the style for the top border. | border-top: 2px solid black; |
border-right | Specifies the style for the right border. | border-right: 3px dashed green; |
border-bottom | Specifies the style for the bottom border. | border-bottom: 1px dotted blue; |
border-left | Specifies the style for the left border. | border-left: 5px solid red; |
border-radius | Rounds the corners of the border. Can be applied to all corners or individually. | border-radius: 10px; |
border-image | Allows the use of an image as a border. Includes sub-properties like border-image-source. | border-image: url(border.png) 30 round; |