CSS Outlines
CSS Outlines
CSS defines a special element decoration called an outline, which is drawn outside the element’s border. CSS Outlines are very similar to borders, but there are some important differences −
- Outlines do not take up space.
-
Outlines do not need to be rectangular.
-
The outline is always the same on all sides; you cannot specify different values for different sides of an element.
CSS Outline – Example
Below is a rectangle with a 5-pixel black border and a 30-pixel green outline.
Outline Example
This tutorial will teach you how to set different properties related to outlines. CSS allows you to control the width, color, style, and more of an outline.
CSS Outline-Width
The outline-width property specifies the width of the outline to add to a box. Its value should be a length or one of the values: thin, medium, or thick, just like the border-width property.
- thin = 1 pixel
- medium = 3 pixels
- thick = 5 pixels
- Specific size (in pixels, points, centimeters, ems, etc.)
A width of zero pixels means no outline.
Example
Here are examples of setting outline widths for different sizes –
<html>
<body>
<p style = "outline-width: thin; outline-style:solid; padding: 5px">
This text is having thin outline.
</p>
<p style = "outline-width: medium; outline-style:solid; padding: 5px">
This text is having thick outline.
</p>
<p style = "outline-width: thick; outline-style:solid; padding: 5px">
This text is having 5px outline.
</p>
<p style = "outline-width: 7px; outline-style:solid; padding: 5px">
This text is having a 7px outline.
</p>
</body>
</html>
CSS Outline Styles
The
outline-style property specifies the style of the line (solid, dashed, or dotted) surrounding an element. It can take one of the following values:
- auto – The default outline provided by the browser.
- none – No outline is used. The outline width is 0.
- solid – The outline is a single solid line.
- dotted – The outline is a series of dots.
- dashed – The outline is a series of dashed line segments.
- double – The outline is two solid lines.
- groove – The outline looks like it’s carved into the page.
- ridge – The outline looks like the opposite of a groove.
- inset – The outline makes the box look like it’s embedded in the page.
- outset – The outline makes the box look like it’s emerging from the canvas.
Example
Here is an example –
<html>
<body>
<p style = "outline-width:thick; outline-style:solid; padding:5px;">
This text has a solid border.
</p>
<p style = "outline-width:thick; outline-style:dotted; padding:5px;">
This text has a dotted border.
</p>
<p style = "outline-width:thick; outline-style:dashed; padding:5px;">
This text has a dashed border.
</p>
<p style = "outline-width:thick; outline-style:double; padding:5px;">
This text has a double border.
</p>
<p style = "outline-width:thick; outline-style:groove; padding:5px;">
This text has a grooved border.
</p>
<p style = "outline-width:thick; outline-style:ridge; padding:5px;">
This text has a raised grooved border.
</p>
</body>
</html>
CSS Outline Colors
outline-color property specifies the color of the border outline. Its value can be a color name, hexadecimal color, or RGB value, just like the color and border-color properties.
- Name – Examples: red, blue, or green
- HEX – Examples: #ff0000
- RGB – Examples: rgb(255,0,0)
- HSL – Examples: hsl(0, 100%, 50%)
- invert – Inverts a color relative to its background color
Example
This is an example −
<html>
<body>
<p style = "outline-width:thick; outline-style:solid; outline-color:red;padding:5px;">
Sets the outline color using the name "red".
</p>
<p style = "outline-width:thick; outline-style:solid; outline-color:#40a944; padding:5px;">
Use the hexadecimal code "#40a944" to set the outline color.
</p>
<p style = "outline-width:thick; outline-style:solid; outline-color:rgb(255,200,0); padding:5px;">
Use the RGB code "rgb(255,200,0)" to set the outline color.
</p>
<p style = "outline-width:thick; outline-style:solid; outline-color:hsl(0, 50%, 50%); padding:5px;">
Use the HSL code "hsl(0, 50%, 50%)" to set the outline color.
</p>
<p style = "outline-width:thick; outline-style:solid; outline-color:invert; padding:5px;">
Set the outline color using the invert option.
</p>
</body>
</html>
CSS Outline Offset Property
outline-offset property specifies the spacing between an element’s border and its outline. The space between the outline and the element is transparent.
The following example shows an outline extending 20 pixels beyond the element’s border:
The above example shows that the space between the element’s border and the outline is transparent.
Example
This is an example −
<html>
<body>
<p style = "border:1px solid #000; outline:1px solid red; outline-offset:20px;margin:25px">
Outline offset 20px;
</p>
<br>
<p style = "border:1px solid #000; outline:1px solid red; outline-offset:10px;margin:15px">
Outline offset 10px;
</p>
<br>
<p style = "border:1px solid #000; outline:1px solid red; outline-offset:5px;margin:10px">
Outline offset 5px;
</p>
</body>
</html>
CSS Shorthand Property outline
outline is a shorthand property that allows you to specify a value for any of three properties: style, color, and width. You can specify these properties in any order using the following syntax.
Syntax
outline: width style color;
Example
Here is an example −
<html>
<body>
<p style = "outline:thin solid red; padding:5px;">
This text has a thin solid red outline.
</p>
<br />
<p style = "outline:thick dashed #009900; padding:5px;">
This text has a thick green dashed outline.
</p>
<br />
<p style = "outline:5px dotted rgb(13,33,232); padding:5px;">
This text has a 5-pixel dotted blue outline.
</p>
</body>
</html>
CSS Outlines vs. Borders
Two obvious differences are that outlines cannot be hidden, while borders can; and that outlines can be automatically styled, while borders cannot. The following table explains more about the differences between outlines and borders:
| Outline | Border |
|---|---|
| An outline is a non-rectangular shape that surrounds an element and is typically a solid color. | A border is a rectangular shape drawn around an element’s content that can be solid, dashed, or dotted and can have different colors and sizes. |
| It does not take up any space in the layout and does not affect the size or position of an element. | It does affect the size and position of an element because it adds width to it. |
| It is often used to highlight or emphasize an element, such as when an element is focused or activated. | It can be used for a variety of purposes, such as separating elements, creating boxes, and adding visual emphasis. |
| It can be created using the outline property in CSS. | It can be created using the border property in CSS. |
CSS Outline – Related Properties
You can explore more examples of CSS outline properties by visiting the subtopics listed in the table below:
| Property | Description |
|---|---|
| outline | Shorthand properties for setting all stroke properties with one declaration |
| outline-color | Sets the element’s stroke color |
| outline-style | Sets the element’s stroke style |
| outline-width | Sets the stroke width of an element |
| outline-offset | Sets the stroke offset of an element |