Border Properties
| Property | Possible Values | Description |
|---|---|---|
border | Shorthand for border-width, border-style, border-color | Example: border: 2px solid red; |
border-width | thin, medium, thick, px, % | Sets the width of the border |
border-style | solid, dashed, dotted, double, groove, ridge, inset, outset, none | Defines the border’s style |
border-color | Any color value (red, #ff0000, rgb(255, 0, 0)) | Specifies the border color |
border-top | Combines border-top-width, border-top-style, border-top-color | Example: border-top: 3px dashed blue; |
border-right | Combines border-right-width, border-right-style, border-right-color | Example: border-right: 2px solid black; |
border-bottom | Combines border-bottom-width, border-bottom-style, border-bottom-color | Example: border-bottom: 4px double green; |
border-left | Combines border-left-width, border-left-style, border-left-color | Example: border-left: 1px dotted orange; |
border-radius | px, % | Rounds the corners of the border (Example: border-radius: 10px;) |
How Border Shorthand Works
| Value Format | Example | Effect |
border: none; | border: none; | Removes the border |
border: 2px solid black; | border: 2px solid black; | Black solid border with 2px width |
border: 3px dashed red; | border: 3px dashed red; | Red dashed border with 3px width |
border-radius: 50%; | border-radius: 50%; | Creates a circular shape (for a square element) |
Example:
.box {
width: 200px;
height: 100px;
border: 3px solid blue;
border-radius: 10px;
padding: 10px;
}✔ Solid blue border (3px)
✔ Rounded corners (10px)