Advertisement
Google Ad Slot: content-top
CSS Outline
The outline property in CSS is used to draw a line around an element, outside its border. Unlike border, the outline doesn’t take up space and doesn’t affect the element’s box model. It is commonly used for focus indicators and accessibility purposes.
Syntax:
outline: <width> <style> <color>;
Width: Thickness of the border (e.g., 1px, 2em, etc.).
Style: The type of border (e.g., solid, dashed, dotted, etc.).
Color: The color of the border (e.g., red, #3498db, rgb(52, 152, 219)).
Outline Width:
You can specify the width of the outline in various units (px, em, %, etc.). You can also use keywords like thin, medium, or thick.
Syntax:
border-width: value | thin | medium | thick;
Hello World!
This page has a light blue outline color!
Outline Styles:
The outline-style property specifies the style of the borders.
Syntax:
outline-style: solid | dashed | dotted | double | groove | ridge | inset | outset | none;
outline style Solid
outline style dashed
outline style dotted
outline style double
outline style groove
outline style ridge
outline style inset
outline style outset
Outline Color:
You can specify the color of the outline using color names, hexadecimal values, RGB, RGBA, HSL, etc.
Syntax:
outline-color: names | hexadecimal values | RGB | RGBA | HSL;
Hello World!
This page has a light blue outline color!
Outline Offset:
The outline-offset property adds space between the element's edge and the outline.
Syntax:
outline-style: value;
Hello World!
The outline-offset property adds space between the element's edge and the outline.