CSS Borders
In this page:
selector {
border: width style color;
}border-style
border-style sets the line pattern of a border, like solid, dashed, or dotted. Without a style set, a border won't render even if width and color are set. A frequent beginner mistake is setting border-width and border-color but forgetting border-style, resulting in no visible border at all.
- solid is by far the most common border style for everyday UI elements like cards and buttons.
- Accepted values:
- none — no border (initial value)
- hidden — no border; wins in table border conflicts
- solid — one continuous line
- dashed — a series of dashes
- dotted — a series of dots
- double — two parallel lines
- groove / ridge — 3D carved or raised look
- inset / outset — 3D sunken or raised look
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
Example: border-style
<style>
.a { border-width: 4px; border-color: red; }
.b { border-width: 4px; border-color: red; border-style: solid; }
</style>
<div class="a">No border-style: invisible</div>
<div class="b">border-style: solid, now visible</div>border-width and border-color
border-width controls how thick a border is, and border-color sets its color. Together with border-style, these three properties fully describe a visible border. Both accept the same color formats as any other CSS color property, including hex, RGB, and named colors.
- Keep border-width small (1px to 2px) for subtle UI outlines, thicker borders draw a lot more visual attention.
- Accepted values:
- length — e.g. 1px, 4px or 0.1em
- thin / medium / thick — keywords (border-width)
- color — any color, transparent or currentcolor (border-color)
- 0 — removes the width
- one to four values — top, right, bottom, left order
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
Example: border-width and border-color
<style>
.box {
border-style: solid;
border-width: 3px;
border-color: navy;
}
</style>
<div class="box">Width and color together</div>Shorthand border Property
The border shorthand lets you set width, style, and color together in a single declaration, in that order, instead of writing three separate properties. If you need different values per side, you still have to fall back to the individual properties instead of the shorthand.
- The shorthand order (width, style, color) is easy to remember since it goes from 'how thick' to 'what pattern' to 'what color'.
- Accepted values:
- width — length or thin, medium, thick
- style — solid, dashed, dotted, double and others
- color — any color value
- values may appear in any order
- style — required for the border to appear
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
Example: Shorthand border Property
<style>
.box {
border: 3px solid navy;
}
</style>
<div class="box">Width, style, and color in one line</div>border-radius
border-radius rounds off an element's corners, from a slight curve to a fully circular shape when set high enough relative to the element's size. Setting all four corners to 50% on a square element is the classic technique for creating a perfect circle.
- A small border-radius, like 6px to 10px, is a common, subtle way to make cards and buttons feel a little softer.
- Accepted values:
- length — e.g. 8px
- percentage — relative to the box size
- 50% — circle on a square, ellipse otherwise
- 9999px — pill shape
- two values with / — elliptical corners, e.g. 50px / 20px
- one to four values — top-left, top-right, bottom-right, bottom-left
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
Example: border-radius
<style>
.box {
width: 80px;
height: 80px;
border: 2px solid black;
border-radius: 50%;
}
</style>
<div class="box"></div>Individual Side Borders
Instead of styling all four sides at once, properties like border-top, border-right, border-bottom, and border-left let you style just one side of an element. This is especially useful for creating tab-like designs or highlighting a single edge without affecting the rest of the box.
- A single colored border-left is a popular, understated way to mark a callout or highlighted block of text.
- Accepted values:
- border-top — width style color for the top side
- border-right — for the right side
- border-bottom — for the bottom side
- border-left — for the left side
- border-block / border-inline — logical equivalents
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
Example: Individual Side Borders
<style>
.box {
border-left: 4px solid blue;
}
</style>
<div class="box">Only the left side is styled</div>- Setting border-color without also setting border-style, in which case no border shows up at all.
- Forgetting that border-radius needs a length value, like 8px, not just a bare number.
- Using four different individual side properties when the shorthand border property would be simpler.
- A visible border needs a style, width, and color to actually appear.
- The border shorthand property combines style, width, and color into a single declaration.
- border-radius rounds an element's corners, and each side can also be styled individually.
All standard CSS border properties covered here are supported by every modern browser.
Chapter Quiz — Complete all 21 topics to unlock
0/21 topics done
Complete these topics first:
- CSS Colors
- CSS RGB Colors
- CSS HEX Colors
- CSS HSL Colors
- CSS Color Keywords
- CSS Backgrounds
- CSS Background Color
- CSS Background Image
- CSS Background Repeat
- CSS Background Attachment
- CSS Background Shorthand
- CSS Multiple Backgrounds
- CSS Background Size
- CSS Background Origin
- CSS Background Clip
- CSS Borders
- CSS Border Style
- CSS Border Width
- CSS Border Color
- CSS Border Sides
- CSS Border Shorthand