Web Development - CSS Borders
CSS Borders
Borders outline elements and help separate sections visually. You can control a border's style, width, color, corners, and more.
Border Style
Use the border-style property to set the line style.
Example
Common border styles:
.box1 { border-style: solid; }
.box2 { border-style: dashed; }
.box3 { border-style: dotted; }
.box4 { border-style: double; }
.box5 { border-style: groove; }
.box6 { border-style: ridge; }
.box7 { border-style: inset; }
.box8 { border-style: outset; }
Try it Yourself »
Tip: A border will not show without a style. Width or color alone is not enough.
Border Width and Color
Use border-width and border-color to control thickness and color.
Example
Width and color:
.card {
border-style: solid;
border-width: 2px;
border-color: #333;
}
Try it Yourself »
You can use keywords like thin, medium, thick, or specific units like px.
Border Shorthand
Combine width, style, and color in one declaration with just using border.
Individual Sides
You can style each side using border-top, border-right, border-bottom, and border-left.
Example
Different borders per side:
.box {
border-top: 4px solid #4caf50;
border-right: 4px dashed #f44336;
border-bottom: 4px dotted #2196f3;
border-left: 4px double #ff9800;
}
Try it Yourself »
Rounded Corners
Use border-radius to round the corners of a border.
Example
Rounded corners:
.card {
border: 2px solid #333;
border-radius: 8px;
padding: 12px;
}
.pill {
border: 2px solid #333;
border-radius: 9999px;
padding: 8px 16px;
}
Try it Yourself »
You can set one to four values: border-radius: 10px 20px 10px 20px; affects each corner clockwise.
Circle and Avatar Images
Make perfectly round images by setting width and height equally and using border-radius: 50%;.
Example
Circle image avatar:
img.avatar {
width: 120px;
height: 120px;
border-radius: 50%;
border: 3px solid #fff;
}
Try it Yourself »
Outline vs Border
outline draws outside the border and does not take space. It is often used for focus states.
Example
Outline on focus:
button {
border: 2px solid #333;
}
button:focus {
outline: 3px solid #4caf50; /* outside the border */
outline-offset: 2px; /* gap between border and outline */
}
Try it Yourself »
Accessibility tip: Do not remove focus outlines without providing a clear replacement.
Border Image
You can draw borders using an image with border-image.
Example
Border from an image:
.frame {
border: 12px solid transparent;
border-image: url('border.png') 30 round;
}
Try it Yourself »
Best Practices
- Use shorthand
borderfor simple cases. - Use individual sides to create visual accents.
- Prefer
border-radiusfor rounded UI elements and avatars. - Keep borders subtle to maintain readability of content.
Next, you'll learn about CSS Spacing (Margins and Padding) - the spacing around and inside elements.
