CSS Borders Outlines Styles

Border Properties

Borders define visible edges, while outlines usually communicate focus or temporary emphasis. They may look similar, but they behave differently in layout and accessibility.

A border takes space as part of the element box. An outline is drawn outside the element and does not change layout size. This makes outline especially useful for keyboard focus states because showing focus should not make nearby content jump.

Borders participate in box geometry, while outlines usually sit outside it. Preserve visible keyboard focus instead of removing outlines without an equivalent.

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:

Do not remove focus outlines unless you replace them with an equally visible focus style. Keyboard users need a clear signal showing where they are on the page.

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; }

Using borders and outlines for shape, separation, and focus

Borders are part of an element's box and affect its visual size unless box-sizing changes the calculation. They are commonly used to separate cards, inputs, buttons, tables, and images. Border radius rounds corners, while individual border sides can create dividers and emphasis.

Outlines are different from borders because they are drawn outside the element and do not take layout space. This makes outlines especially useful for keyboard focus indicators. Removing outlines without replacing them harms accessibility because keyboard users lose the visible sign of where they are.

Use border for visible edges that belong to the component.
Use outline for focus rings and temporary emphasis.
Remember that border can affect element size.
Do not remove focus outline unless you provide an accessible replacement.