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)).

This element has a black border with a width of 2px and a green outline with a width of 10px.

Try it yourself

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!

Example

div {

outline: 1px solid #3498db;

outline-width: 5px;

}

Try it yourself

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

Example

.solid{ outline-style : solid; }

.dashed{ outline-style : dashed; }

.dotted{ outline-style : dotted; }

.double{ outline-style : double; }

.groove{ outline-style : groove; }

.ridge{ outline-style : ridge; }

.inset{ outline-style : inset; }

.outset{ outline-style : outset; }

Try it yourself

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!

Example

div {

outline: 1px solid #3498db;

outline-color: red;

}

Try it yourself

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.

Example

div {

outline: 3px solid green;

outline-offset: 5px;

border : 2px solid

}

Try it yourself

❮ Previous

Next ❯

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.