CSS Outline Generator
Design a CSS outline with style, width, color, and offset.
3px
4px
8px
box
CSS
outline: 3px solid #6366f1; outline-offset: 4px;
Outline vs. border
Unlike border, a CSS outline is drawn outside the element and takes up no layout space, so it never shifts surrounding content — which is exactly why it's the right tool for keyboard focus rings. The outline-offset property pushes it away from the edge for breathing room. Note that outlines don't follow border-radius in every browser. Generated locally in your browser.
Related Design & CSS tools
Color Converter
Convert a color to HEX, RGB, HSL, HSB, and CMYK at once.
HEX to RGB
Convert HEX color codes to RGB / RGBA values.
RGB to HEX
Convert RGB values into HEX color codes.
CSS Box Shadow Generator
Visually design CSS box-shadow with a live preview and code.
CSS Border Radius Generator
Visually craft border-radius with a live preview.
HEX to CMYK
Convert HEX colors to CMYK print values.
CMYK to HEX
Convert CMYK print values to HEX colors.
HEX to HSB
Convert HEX colors to HSB / HSV values.