CSS Borders & Border Radius
Borders and border-radius are important properties for giving elements "shape." Borders add outline lines to elements, while border-radius softens sharp corners.
Border Properties Quick Reference
| Property | Common Values | Purpose |
|---|---|---|
border-width |
1px, 2px, medium, thick |
Border width |
border-style |
solid, dashed, dotted, double, none |
Border style |
border-color |
#333, red, transparent |
Border color |
border |
2px solid #333 |
Shorthand (width+style+color) |
border-top/right/bottom/left |
1px dashed red |
Individual side borders |
border-radius |
4px, 50%, 10px 20px |
Corner radius |
border-collapse |
collapse, separate |
Table border collapse mode |
Border Property
Three Elements of a Border
Every border has three elements: width, style, and color.
Example
HTML
<style>
.box {
border-width: 2px;
border-style: solid;
border-color: #333;
}
/* Shorthand */
.box {
border: 2px solid #333;
padding: 16px;
background: #f9f9f9;
}
</style>
<div class="box">2px solid border wrapping the box</div>
Border Style Values
Example
HTML
<style>
.solid { border-style: solid; }
.dotted { border-style: dotted; }
.dashed { border-style: dashed; }
.double { border-style: double; }
</style>
<div class="solid">Solid border</div>
<div class="dotted">Dotted border</div>
<div class="dashed">Dashed border</div>
<div class="double">Double border</div>
Border Radius
border-radius rounds element corners:
Example
HTML
<style>
.rounded {
border-radius: 8px;
border: 1px solid #ccc;
padding: 16px;
background: #f5f5f5;
}
.circle {
border-radius: 50%;
width: 100px;
height: 100px;
background: #3498db;
}
</style>
<div class="rounded">Rounded corners</div>
<div class="circle">Circle</div>
Common Uses
Round avatar:
HTML
<style>
.avatar {
border-radius: 50%;
width: 100px;
height: 100px;
overflow: hidden;
}
</style>
<div class="avatar">Avatar</div>
Capsule button:
HTML
<style>
.pill {
border-radius: 999px;
padding: 8px 24px;
background: #3498db;
color: white;
}
</style>
<div class="pill">Capsule button</div>
❓ FAQ
Q What's the difference between border-radius: 50% and 999px?
A 50% is relative to element dimensions — square becomes circle, rectangle becomes ellipse. 999px is a large fixed value — as long as it exceeds half the dimensions, all corners become fully rounded "capsule" shape. Same effect for squares, different for rectangles.
Q Can outline and border be used together?
A Yes. outline doesn't occupy space (doesn't affect element size), border does. outline is commonly used with `:focus` state to provide focus indicators for keyboard users. Use `outline-offset` to control distance between outline and element boundary.
Q How to set radius for individual corners?
A Use `border-top-left-radius`, `border-top-right-radius`, `border-bottom-right-radius`, `border-bottom-left-radius` for individual corners. Or shorthand: `border-radius: top-left top-right bottom-right bottom-left;`.
📖 Summary
- Borders and border-radius are fundamental tools for giving page elements "shape"
bordercontrols element outlines,border-radiussoftens sharp corners- Mastering combinations (like
border-radius: 50%for round avatars,border: noneto remove defaults) is very practical in real development
📝 Exercises
- Create a card with border and border-radius to look like a "business card" — with border, rounded corners, and padding.
- Use
border-radius: 50%to create a circular avatar frame. - Use different border combinations to create a menu item with "underline" (only bottom border).
- Try
dashedanddottedborder styles to see their visual differences.