CSS Borders

Written by RedoHub Team · Last updated: July 31, 2026

The CSS border properties allow you to specify the style, width, and color of an element's border. Every HTML element can have a border that surrounds the padding and content.

Border Style

The border-style property is the most important; it specifies what kind of border to display. Without this, no border will appear.

Solid Border

Dashed Border

Dotted Border

Double Border

/* Example Syntax */
p {
    border-style: solid;
    border-style: dotted;
    border-style: dashed;
    border-style: double;
    border-style: none; /* No border */
}

Border Width

The border-width property sets the thickness of the border. It can be set using specific units (px, pt, em) or by using one of the three pre-defined values: thin, medium, or thick.

p {
    border-style: solid;
    border-width: 5px;
}

Border Color

The border-color property is used to set the color of the four borders. The color can be set by name, HEX, RGB, or HSL values.

p {
    border-style: solid;
    border-color: #2e7d52;
}

The Border Shorthand

To keep your CSS code clean, you can specify all the individual border properties in one single property. The order of the values should be: width style color.

/* Shorthand property */
p {
    border: 3px solid #007bff;
}

Note: If you omit the style, the border will not be visible because the default style is none.

Individual Sides

You can also specify different borders for each side (top, right, bottom, left) of an element:

p {
    border-top: 2px solid red;
    border-bottom: 5px dotted blue;
    border-left: 10px solid green;
}

Rounded Borders

The border-radius property is used to add rounded corners to an element, making it look more modern and friendly.

Element with Rounded Corners

div {
    border: 2px solid #2e7d52;
    border-radius: 12px;
}

Tip: You can create a perfect circle by setting the border-radius to 50% on a square element.

Common Mistakes to Avoid

Rounded corners "leaking" a child's square background. If a rounded box contains an image or colored child element, add overflow: hidden; to the parent — otherwise the child's square corners poke out past the rounded edge.

Forgetting border-style. Setting only border-width and border-color shows nothing — the default style is none, so you must explicitly set solid, dashed, etc.

Using a border where spacing was actually needed. If you want visual separation between elements, that's margin, not a border — adding a border just to create a gap adds an unwanted visible line.

Try It: A Card with an Accent Border

A single-side border (border-left) is a very common real-world pattern for highlighting a card or callout — different from the full 4-side borders shown above:

.accent-card {
    border-left: 4px solid #2e7d52;
    padding: 12px 16px;
    background-color: #f8f9fa;
}

Rendered result:

New Feature: Dark mode is now available in Settings.

Frequently Asked Questions

Q: Why isn't my border showing up even though I set border-color?

A: You almost certainly forgot border-style — color and width alone render nothing.

Q: Can each side of a border have a different color?

A: Yes — set border-top-color, border-right-color, etc. individually, or use the per-side shorthands like border-left: 2px solid red;.

Q: Is border-radius supported in all modern browsers?

A: Yes, universally, with no vendor prefixes needed since roughly 2015. See the MDN border-radius reference for the full syntax including elliptical corners.

« Previous Lesson Next Lesson »