1. Syntax Overview
The border
shorthand property combines several individual properties:
border: <border-width> <border-style> <border-color>;
Example:
border: 2px solid black;
border-width
: Specifies the thickness of the border (e.g.,1px
,medium
,5em
).border-style
: Defines the style of the border (e.g.,solid
,dashed
,dotted
, etc.).border-color
: Sets the color of the border (e.g.,red
,#000
,rgba(255, 0, 0, 0.5)
).
2. Individual Border Properties
CSS allows you to style each side of an element individually.
Border Width:
border-width: 5px; /* All sides */
border-width: 5px 10px; /* Top & Bottom, Right & Left */
Border Style:
border-style: dotted; /* All sides */
border-style: solid dashed; /* Top/Bottom, Right/Left */
Border Color:
border-color: red; /* All sides */
border-color: red blue green yellow; /* Top, Right, Bottom, Left */
Example:
border-top: 3px dotted red;
border-right: 2px solid blue;
border-bottom: 4px dashed green;
border-left: 1px groove yellow;
3. Border Styles
CSS supports a variety of border styles:
Border Style | Description | Example Code |
---|---|---|
solid |
A single, solid line. | border: 2px solid black; |
dotted |
A border made of dots. | border: 2px dotted blue; |
dashed |
A border made of dashes. | border: 2px dashed red; |
double |
Two parallel solid lines. | border: 4px double green; |
groove |
A carved effect. | border: 3px groove gray; |
ridge |
An opposite of groove. | border: 3px ridge gray; |
inset |
Makes the border look inset. | border: 3px inset gray; |
outset |
Makes the border look outset. | border: 3px outset gray; |
none |
Removes the border. | border: none; |
hidden |
Same as none , but for tables. |
border: hidden; |
4. Rounded Borders
Use the border-radius
property to create rounded corners.
border: 2px solid black;
border-radius: 10px; /* Rounded corners */
Fully Circular Borders:
border-radius: 50%;
5. Border Images
Replace the solid border with an image using border-image
.
border: 10px solid transparent;
border-image: url(border.png) 30 round;
6. Advanced Tips
Hover Effects:
button:hover {
border: 3px solid blue;
}
Gradient Borders:
border: 5px solid transparent;
border-image: linear-gradient(to right, red, blue);
border-image-slice: 1;
Box Shadows with Borders:
border: 2px solid black;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
7. Common Use Cases
- Framing Content:
.content { border: 2px solid #ccc; padding: 10px; }
- Stylized Buttons:
.button { border: 2px solid #ff5722; border-radius: 5px; padding: 10px 20px; }
- Highlighting Input Fields:
input:focus { border: 2px solid #4caf50; }
8. Browser Compatibility
The border
property is supported in all modern browsers. However, some advanced styles like border-image
may need testing across older versions.