Free · Fast · Privacy-first

CSS Outline Generator

Outline and border look similar but behave differently in layout, and the distinction matters both for design quality and accessibility compliance.

⚡

Preview outline alongside border on the same element

🔒

Adjustable outline-offset for gap between element and outline ring

✨

Accessibility notes on focus-visible outline requirements

⚡

Generates outline shorthand and outline-offset declarations

Cost: Free forever
Sign-up: Not required
Processing: In your browser
Privacy: Files stay local

FreeNo signupWhite-label

Add this Border Builder to your website

Drop the Border Builder into any page — blog post, product docs, intranet, school portal — with a single line of HTML. Your visitors get the full tool, processed entirely in their browser. No backend, no uploads, no signup.

Files stay 100% in the visitor's browser
Responsive — adapts to any container width
Free forever, no API key needed

Embed code

<iframe
  src="https://www.fixtools.io/css-tool/border-builder?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Border Builder by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

<iframe
  src="https://www.fixtools.io/css-tool/border-builder?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Border Builder by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

Attribution-friendly: a small "Powered by FixTools" link appears in the embed footer.

CSS Outline: Layout Behavior, Accessibility, and Focus-Visible Patterns

The most important difference between outline and border is that outline does not participate in the document layout. An outline can extend beyond the element's border box into the surrounding space without pushing other elements. Adding a 2px outline to an element does not increase its measured width or height and does not shift adjacent content. This makes outline ideal for focus indicators, selection highlights, and temporary visual annotations where you want to mark an element visually without disturbing the layout. Border, by contrast, is part of the box model and affects layout calculations.

Outline-offset is a separate property that specifies the distance between the outline and the element's border edge. A positive value pushes the outline outward; a negative value pulls it inward, potentially overlapping the element's content. Setting outline: 2px solid #6366f1 with outline-offset: 3px creates a ring that floats 3px outside the element border, which improves visual clarity on elements with their own border. Outline-offset accepts negative values too: outline-offset: -4px places the outline inside the element, creating an inner highlight effect commonly used in image galleries and content pickers.

Removing outline on focused elements with outline: none or outline: 0 is one of the most common accessibility violations on the web. Keyboard users who navigate with Tab rely on the focus indicator to know which element is active. WCAG 2.1 Success Criterion 2.4.7 requires a visible focus indicator. The recommended pattern is to keep the native focus indicator or replace it with a custom one using :focus-visible rather than :focus. The :focus-visible pseudo-class applies styles only when the browser determines keyboard navigation is in use, allowing mouse clicks to suppress the ring while still serving keyboard users correctly.

Performance is the other practical reason to prefer outline over border for any visual ring that toggles often. Outline changes do not trigger layout, so toggling outline on a hover or focus event produces a paint-only update. Border changes that include width or style force a layout recalculation because the box model changes. On a single isolated element the difference is invisible, but in long lists where many items respond to keyboard navigation, in drag-and-drop interfaces where dragover fires repeatedly during a drag, or in animated transitions that swap the ring shape on state change, the cumulative cost of border-driven reflows shows up as jank. Pair outline with outline-offset to control the visual gap and with box-shadow as a fallback for older browsers that did not respect border-radius on outline. The result is a focus indicator that is both accessible and inexpensive enough to use freely.

MDN: outline MDN: :focus-visible

How to use this tool

💡

Set outline-width to 2px and outline-style to solid, then use the offset slider to add a 2px gap between the element and the outline ring. This is the recommended starting point for accessible focus indicators that meet WCAG 2.1 contrast and size requirements.

How It Works

Step-by-step guide to css outline generator:

1
Set outline style and width
Choose outline-style (solid is most common for focus rings) and set outline-width to 2px or 3px. Thinner outlines may not meet WCAG minimum size requirements for focus indicators.
2
Choose outline color
Select a color with sufficient contrast against both the element background and the surrounding page background. WCAG 2.1 SC 1.4.3 applies to focus indicators in WCAG 2.2.
3
Adjust outline-offset
Add 2px to 4px of offset to separate the outline from the element edge. On elements with their own border, offset prevents the outline from sitting against the border and looking ambiguous.
4
Copy the CSS
Copy the outline and outline-offset declarations. Apply them inside a :focus-visible selector rather than :focus to avoid showing the ring on mouse interactions.

Real-world examples

Common situations where this approach makes a real difference:

Accessible focus indicator for buttons

A button needs a visible focus ring for keyboard navigation. The recommended pattern is: .btn:focus-visible { outline: 3px solid #6366f1; outline-offset: 2px; }. The 3px width meets WCAG 2.2 focus appearance requirements. The offset separates the ring from the button border. Using :focus-visible suppresses the ring for mouse clicks while serving keyboard and switch access users.

Custom focus ring that follows border-radius

A rounded button needs a rounded focus ring. Modern browsers follow border-radius on outline since 2021-2022, but for broader support: .btn:focus-visible { outline: 2px solid transparent; box-shadow: 0 0 0 3px #6366f1; }. The transparent outline satisfies outline-requirement checks in automated accessibility tools while box-shadow provides the visible rounded ring that follows the button's border-radius.

Image picker with inner selection outline

In an image grid, selected images need a selection indicator without adding space outside the grid item. Setting outline: 3px solid #6366f1 with outline-offset: -3px places the ring inside the image boundary. The negative offset pulls the outline inward by 3px, sitting just inside the image edges. This marks the selection without affecting grid spacing or image dimensions.

Removing native outline and replacing with custom style

To replace the browser's native focus ring with a branded one: .interactive:focus { outline: none; } .interactive:focus-visible { outline: 2px solid #6366f1; outline-offset: 3px; }. The :focus rule removes the native ring universally. The :focus-visible rule adds the custom ring back only for keyboard navigation. Never use the :focus rule alone without a :focus-visible replacement, as that leaves keyboard users with no visible indicator.

Pro tips

Get better results with these expert suggestions:

Use box-shadow to simulate outline for rounded focus rings in older browsers

Browsers that do not follow border-radius on outline produce rectangular focus rings on rounded elements. A box-shadow: 0 0 0 3px #6366f1 simulates an outline that follows border-radius in all browsers. Use both together: outline for browser-native focus and box-shadow as the visible styled ring, with outline: 2px solid transparent to satisfy browsers that require an explicit outline for focus.

Negative outline-offset creates inner rings

Setting outline-offset: -4px places the outline inside the element's border edge. This creates an inner highlight ring rather than an outer glow. The effect is used in image selection interfaces where the border belongs to the image container and the inner ring indicates the selection state without adding space outside the container.

Use :focus-visible instead of :focus for custom focus styles

:focus applies styles whenever an element is focused by any input method, including mouse clicks. :focus-visible applies styles only when the browser determines keyboard navigation triggered the focus, suppressing the ring on mouse interactions. This gives keyboard users a clear indicator while keeping the interface clean for mouse users.

Outline-color: auto uses the browser's system focus color

Setting outline: 2px auto on :focus or :focus-visible tells the browser to use its native system focus color, which on macOS is a blue ring and on Windows is a black dotted ring. This automatically adapts to high-contrast accessibility modes and OS-level focus color customizations without you needing to specify a color.

Never remove outline without a replacement

Setting outline: none on :focus removes the visible focus indicator for keyboard users without providing any alternative. Replace it with a custom focus style: use :focus-visible and set a distinct outline color, width, and offset that meets WCAG 2.1 color contrast requirements for focus indicators.

Use outline-offset to separate the ring from the border

On bordered elements, a zero-offset outline sits directly against the border and can look cluttered. Adding outline-offset: 2px to 4px creates visible separation between the element's own border and the focus ring, making both clearer and more distinct.

Outline does not clip to border-radius by default in older browsers

Modern browsers (Chrome 94+, Firefox 88+, Safari 16+) respect border-radius on outlines. Older browsers render outlines as rectangles regardless of the element's border-radius. If you support older browsers, test your outline focus styles and consider using box-shadow as a fallback for rounded focus rings.

FAQ

Frequently asked questions

Border is part of the CSS box model and contributes to the element's layout dimensions. Adding a border increases the element's painted area and, in the content-box model, its total occupied space. Outline is drawn outside the border edge but does not affect layout: it overlaps surrounding space without shifting other elements. Outline is also always rectangular in older browsers (modern browsers respect border-radius), while border follows the box model geometry exactly. Use border for structural styling and outline for focus indicators and non-layout annotations.

Keyboard users navigate web pages using Tab, Shift+Tab, and arrow keys. The browser's focus indicator, typically shown as an outline, tells them which element is currently active. Removing the outline with outline: none on :focus without providing an alternative leaves keyboard users unable to determine where focus is. This violates WCAG 2.1 Success Criterion 2.4.7 (Focus Visible) and is one of the most common WCAG failures. Always replace the native outline with a custom focus style rather than simply removing it.

Outline-offset is a separate CSS property that sets the distance between the outline and the element's border edge. A positive value like outline-offset: 3px pushes the outline outward, creating a gap between the element and the outline ring. A negative value pulls the outline inward, placing it inside the element. Outline-offset is separate from the outline shorthand and must be set as its own declaration: outline: 2px solid #6366f1; outline-offset: 3px. It is particularly useful on bordered elements where a zero-offset outline would sit against the border and look ambiguous.

Modern browsers follow border-radius on outlines. Chrome added this in version 94 (2021), Firefox in version 88, and Safari in version 16. Before these versions, outline always rendered as a rectangle regardless of the element's border-radius. For projects that support these older browser versions, use box-shadow as the visible focus ring instead of outline, because box-shadow always follows border-radius. Set outline: 2px solid transparent alongside the box-shadow to satisfy accessibility checking tools that look for an explicit outline on focus.

:focus triggers whenever an element receives focus from any input method, including mouse clicks, touch, and keyboard. :focus-visible triggers only when the browser determines that a focus indicator should be visible, which typically means keyboard navigation or programmatic focus. Using :focus for custom focus styles shows the ring on every mouse click, which is visually noisy. Using :focus-visible shows the ring only when it is functionally useful for navigation. Modern design systems target :focus-visible for custom rings and reset the native outline on :focus.

No. Unlike box-shadow, outline does not accept multiple comma-separated values. Only one outline can be applied to an element at a time. To simulate layered outlines, use a combination of outline and box-shadow. For example: outline: 2px solid #6366f1; box-shadow: 0 0 0 5px rgba(99,102,241,0.3) creates an inner sharp ring from outline and an outer soft glow from box-shadow. This two-layer pattern is common for focus states that need both a crisp edge and a soft halo.

Some elements, particularly those with -webkit-appearance or browser-styled form controls, have native focus styles applied through user-agent stylesheets that can override CSS outline rules. On macOS Safari, buttons and inputs with default appearance may maintain a native blue glow on focus regardless of outline: none. To fully override, add appearance: none or -webkit-appearance: none to the element alongside outline: none. This removes the native form control styling that generates the default focus appearance.

WCAG 2.2 Success Criterion 2.4.11 (Focus Appearance) requires that the focus indicator have a minimum area of at least the perimeter of the unfocused component times 2 CSS pixels, and sufficient contrast. In practice, a 2px or 3px solid outline in a color with at least 3:1 contrast ratio against the adjacent colors meets the minimum requirements. An outline: 3px solid #6366f1 with outline-offset: 2px on a white background exceeds these requirements. Use a color contrast checker to verify that your chosen outline color meets the 3:1 ratio.

The cost gap matters when the toggle happens often or to many elements simultaneously. A single border-width or border-style change forces the browser to recompute layout for the affected element and any siblings whose position depends on it, then repaint, then composite. An outline change is paint-only because outline does not participate in layout. For an isolated focus on one button the difference is unmeasurable, but for keyboard navigation across a long list, for dragover firing repeatedly during a drag operation, or for animated transitions that swap rings on every keystroke, the cumulative reflow cost from border toggling is visible as jank on slower devices. Outline keeps the cost stable regardless of how many elements respond, which is why design systems standardise on outline for focus indicators.

Outline is independent of box-sizing because it draws outside the element's border box without participating in layout. A button declared as width: 200px stays 200px whether or not it has an outline, regardless of whether box-sizing is content-box or border-box. This makes outline the cleanest tool for visual rings on components whose width is part of a layout grid or token system, because the outline can change width and offset without disturbing measurements. Border, by contrast, behaves differently under content-box (border adds to outer size) and border-box (border subtracts from content area). When a design token specifies a fixed component width, using outline for state rings keeps the token meaning stable across all browsers and CSS resets; using border requires you to also know which box-sizing model applies and to add transparent borders on the default state to pre-allocate space across every variant in the system.