CSS Borders and Outlines — Styles and Examples

Border Properties

Borders are drawn inside the element's box, between the padding and margin. Every border has three components: width, style, and color.

Border Properties - Width, Style, Color, Radius

/* Shorthand: width style color */
.box { border: 2px solid #3498db; }

/* Individual properties */
.box {
    border-width: 2px;
    border-style: solid;   /* solid | dashed | dotted | double | groove | ridge | inset | outset | none | hidden */
    border-color: #3498db;
}

/* Individual sides */
.card {
    border-top: 4px solid #3498db;
    border-right: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    border-left: 1px solid #dee2e6;
}

/* Shorthand per side */
.highlight { border-left: 4px solid #e74c3c; }

/* border-radius - rounded corners */
.rounded    { border-radius: 8px; }
.pill       { border-radius: 50px; }
.circle     { border-radius: 50%; width: 100px; height: 100px; }

/* Individual corners: top-left top-right bottom-right bottom-left */
.custom-radius { border-radius: 10px 0 10px 0; }

/* Elliptical radius: horizontal / vertical */
.ellipse { border-radius: 50% / 30%; }

/* border-image - use an image as border */
.image-border {
    border: 10px solid transparent;
    border-image: url('border.png') 30 round;
}

/* Gradient border */
.gradient-border {
    border: 3px solid transparent;
    background: white;
    background-clip: padding-box;
    position: relative;
}
.gradient-border::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    background: linear-gradient(135deg, #667eea, #764ba2);
    z-index: -1;
}

Outline vs Border

Outlines look similar to borders but have key differences:

Feature	Border	Outline
Affects layout	Yes - takes up space	No - drawn outside, no space
Individual sides	Yes (border-top, etc.)	No - all sides only
Border radius	Yes	No (outline-radius not standard)
Main use	Design element	Accessibility focus indicator
offset	N/A	`outline-offset` moves it away

Outline - Focus Styles and Accessibility

/* Outline shorthand: width style color */
.focused { outline: 3px solid #3498db; }

/* outline-offset - space between element and outline */
button:focus {
    outline: 2px solid #3498db;
    outline-offset: 3px;  /* gap between button edge and outline */
}

/* NEVER do this - breaks keyboard accessibility */
/* *:focus { outline: none; } */

/* Instead, replace with a custom focus style */
:focus-visible {
    outline: 2px solid #3498db;
    outline-offset: 2px;
    border-radius: 2px;
}

/* outline: none only when providing alternative */
button:focus:not(:focus-visible) {
    outline: none;  /* hide for mouse users, keep for keyboard */
}

/* Outline styles */
.dashed  { outline: 2px dashed #e74c3c; }
.dotted  { outline: 2px dotted #2ecc71; }
.double  { outline: 4px double #3498db; }