CSS Outline

Introduction to CSS Outline

CSS outline is a line drawn around elements, outside the border. Unlike borders, outlines don't take up space and don't affect the layout of the page. They're commonly used for accessibility and focus indicators.

1. Basic Outline Properties

CSS provides several properties to control outline appearance.

/* Individual outline properties */
.outline-basic {
    outline-width: 2px;
    outline-style: solid;
    outline-color: blue;
}

/* Shorthand property */
.outline-shorthand {
    outline: 2px solid blue;
}

/* Different outline widths */
.outline-widths {
    outline-width: thin;    /* Browser default thin */
    outline-width: medium;  /* Browser default medium */
    outline-width: thick;   /* Browser default thick */
    outline-width: 1px;     /* Custom width */
    outline-width: 0.2em;   /* Relative width */
}

2. Outline Styles

The outline-style property defines the style of the outline.

/* Outline styles */
.outline-styles {
    outline-style: none;     /* No outline */
    outline-style: solid;    /* Solid line */
    outline-style: dashed;   /* Dashed line */
    outline-style: dotted;   /* Dotted line */
    outline-style: double;   /* Double line */
    outline-style: groove;   /* 3D grooved outline */
    outline-style: ridge;    /* 3D ridged outline */
    outline-style: inset;    /* 3D inset outline */
    outline-style: outset;   /* 3D outset outline */
}

/* Examples with different styles */
.solid-outline {
    outline: 2px solid #007bff;
}

.dashed-outline {
    outline: 3px dashed #28a745;
}

.dotted-outline {
    outline: 2px dotted #dc3545;
}

3. Outline Colors

Control the color of outlines using various color formats.

/* Named colors */
.outline-named {
    outline: 2px solid red;
    outline: 2px solid blue;
    outline: 2px solid green;
}

/* Hexadecimal colors */
.outline-hex {
    outline: 2px solid #ff0000;  /* Red */
    outline: 2px solid #00ff00;  /* Green */
    outline: 2px solid #0000ff;  /* Blue */
}

/* RGB and RGBA colors */
.outline-rgb {
    outline: 2px solid rgb(255, 0, 0);        /* Red */
    outline: 2px solid rgba(0, 255, 0, 0.5);  /* Semi-transparent green */
}

/* HSL colors */
.outline-hsl {
    outline: 2px solid hsl(240, 100%, 50%);   /* Blue */
}

/* Special color values */
.outline-special {
    outline-color: invert;    /* Inverted color */
    outline-color: currentColor; /* Same as text color */
}

4. Outline Offset

The outline-offset property controls the space between the outline and the border.

/* Outline offset */
.outline-offset {
    outline: 2px solid blue;
    outline-offset: 5px;     /* 5px gap between border and outline */
}

/* Negative offset */
.outline-negative {
    outline: 2px solid red;
    outline-offset: -5px;    /* Outline inside the border */
}

/* Zero offset (default) */
.outline-zero {
    outline: 2px solid green;
    outline-offset: 0;       /* No gap */
}

/* Large offset */
.outline-large {
    outline: 3px dashed purple;
    outline-offset: 10px;    /* Large gap */
}

5. Focus Outlines

Outlines are crucial for accessibility, especially for keyboard navigation.

/* Default focus outline */
button:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Custom focus styles */
.custom-focus:focus {
    outline: 3px solid #ff6b6b;
    outline-offset: 3px;
    outline-style: dashed;
}

/* Removing outline (not recommended) */
.no-outline:focus {
    outline: none;  /* Removes outline - bad for accessibility */
}

/* Better alternative - custom focus style */
.better-focus:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
}

/* Focus within container */
.form-group:focus-within {
    outline: 2px solid #28a745;
    outline-offset: 2px;
}

6. Practical Outline Examples

Real-world examples of using outlines effectively.

/* Button focus states */
.btn {
    padding: 10px 20px;
    border: 2px solid #007bff;
    background: #007bff;
    color: white;
    cursor: pointer;
}

.btn:focus {
    outline: 2px solid #0056b3;
    outline-offset: 2px;
}

/* Card hover effects */
.card {
    padding: 20px;
    border: 1px solid #ddd;
    transition: outline 0.3s ease;
}

.card:hover {
    outline: 2px solid #007bff;
    outline-offset: 3px;
}

/* Form input focus */
.form-input {
    padding: 10px;
    border: 1px solid #ccc;
}

.form-input:focus {
    outline: 2px solid #007bff;
    outline-offset: 1px;
    border-color: #007bff;
}

/* Navigation link focus */
.nav-link:focus {
    outline: 2px dashed #28a745;
    outline-offset: 4px;
    text-decoration: none;
}

7. Outline vs Box Shadow

Understanding when to use outline vs box-shadow for focus effects.

/* Using outline */
.outline-focus:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
    /* Pros: Doesn't affect layout, good for accessibility */
    /* Cons: Always rectangular, limited styling */
}

/* Using box-shadow */
.shadow-focus:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
    /* Pros: More flexible styling, can be rounded */
    /* Cons: Can affect layout slightly */
}

/* Combining both */
.combined-focus:focus {
    outline: 2px solid transparent;  /* For high contrast mode */
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
}

/* Rounded button with focus */
.rounded-btn {
    border-radius: 25px;
    padding: 10px 20px;
}

.rounded-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
    /* Box shadow follows border-radius */
}

8. Accessibility Considerations

Important guidelines for using outlines accessibly.

/* High contrast mode support */
.accessible-focus:focus {
    outline: 2px solid;
    outline-color: Highlight;  /* System highlight color */
    outline-offset: 2px;
}

/* Dark theme considerations */
@media (prefers-color-scheme: dark) {
    .theme-focus:focus {
        outline: 2px solid #66b3ff;  /* Lighter blue for dark backgrounds */
        outline-offset: 2px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: no-preference) {
    .animated-focus:focus {
        outline: 2px solid #007bff;
        outline-offset: 2px;
        transition: outline-offset 0.2s ease;
    }
}

/* Skip link styling */
.skip-link:focus {
    position: absolute;
    top: 10px;
    left: 10px;
    outline: 3px solid #ff6b6b;
    outline-offset: 2px;
    background: white;
    padding: 10px;
    z-index: 1000;
}