---
title: "Outline properties"
date: "2017-11-11T13:07:43+00:00"
summary: "Customize element outlines with precision using width, color, and style options. Learn how to enhance your design's visual hierarchy and interactivity while complementing existing border properties."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/outline-properties"
id: "9b7e2611-01ec-49ce-89a4-dc62fde1e067"
---

Table of contents will be added

Set an outline Width, Color Offset and Style to an element. Outline properties can be used together with Border properties.

Outline width
-------------

Set the width of the elements outline. An outline is line that is drawn around an element, outside it's border.

### Expected value:

*   Enter a number. 0 is no outline, 1 is 1px
*   Negative numbers are accepted

### Accepted units:

*   **blank** - Enter a number and the value will be interpreted as pixels

Outline color
-------------

Set the color of the outline.

### Expected value:

*   Select a color from the color palette
*   Translucent colors are accepted

Outline style
-------------

Set the style of the outline.

### Options:

*   **None** \- No outline is applied
*   **Solid** - Display a solid outline
*   **Dotted** - Display a dotted outline
*   **Dashed** - Display a dashed outline
*   **Double** - Display a double outline. The outline must be at least 3px to use a double outline

Find more information at [https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style](https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style)