Border Basics

The border shorthand and its longhand properties control the line drawn around an element's padding box. Borders sit between padding and margin in the CSS box model.

The Three Core Properties

border-width — thickness (px, em, or keywords: thin/medium/thick)
border-style — appearance: solid, dashed, dotted, double, groove, ridge, inset, outset, none, hidden
border-color — any CSS colour; defaults to currentColor

Shorthand

border: [width] [style] [color]. All three values are optional but style must be present for the border to appear.

Example

/* Shorthand — width style colour */
.card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5rem;
}

/* Longhands for clarity */
.input {
    border-width: 2px;
    border-style: solid;
    border-color: #9e9e9e;
}
.input:focus {
    border-color: #1a73e8;
    outline: none;
}

/* Decorative dashed border */
.dropzone {
    border: 3px dashed #bdbdbd;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
}
.dropzone.active {
    border-color: #1a73e8;
    background: #e8f0fe;
}

/* No border */
.borderless td {
    border: none;
}

CSS

Full Editor

Pro Tip

If you only want a border on one side, use the individual longhand (border-bottom: 2px solid #ccc) rather than resetting the other three sides — it is cleaner and avoids overriding inherited border properties.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned