CSS: CSS Borders & Border Radius
Last updated: 2026-10-13
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 |
1. Border Property
(1) Three Elements of a Border
Every border has three elements: width, style, and color.
▶ Example
▶ Try it Yourself(2) Border Style Values
▶ Example
▶ Try it Yourself2. Border Radius
border-radius rounds element corners:
▶ Example
▶ Try it Yourself(1) 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.
