CSS Border

The border property adds a visible line around elements. It has three components: width, style, and color.

Shorthand

/* width | style | color */
.box { border: 2px solid #333; }
.highlight { border: 3px dashed #e74c3c; }
.subtle { border: 1px solid #eee; }

Border Styles

.solid  { border-style: solid; }
.dashed { border-style: dashed; }
.dotted { border-style: dotted; }
.double { border-style: double; }
.groove { border-style: groove; }
.ridge  { border-style: ridge; }
.none   { border-style: none; }

Individual Sides

.box {
    border-top: 2px solid #333;
    border-bottom: 1px solid #eee;
    border-left: 4px solid #3498db;
    border-right: none;
}

Longhand Properties

.box {
    border-width: 2px;
    border-style: solid;
    border-color: #333;
}

/* Individual side + property */
.box {
    border-left-width: 4px;
    border-left-style: solid;
    border-left-color: #3498db;
}

Practical Examples

/* Card with subtle border */
.card {
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: 1.5rem;
}

/* Left accent border */
.alert {
    border-left: 4px solid #f39c12;
    padding: 1rem 1.5rem;
    background: #fef9e7;
}

/* Input field */
input {
    border: 2px solid #ddd;
    padding: 0.5rem;
    transition: border-color 0.2s;
}
input:focus {
    border-color: #3498db;
    outline: none;
}