> For the complete documentation index, see [llms.txt](https://codennerd.gitbook.io/cxcss/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codennerd.gitbook.io/cxcss/product-guides/border/outline.md).

# Outline

#### Outline Width and Offset Utility Classes

The following utility classes control the outline width and offset of elements:

**`.outline-{width}`**

Sets the outline-width property to a specific value in pixels.

CSS equivalent: `outline-width: {width}px;`

Example usage:

```html
<div class="outline outline-2">
  <!-- Content with outline width of 2 pixels -->
</div>
```

***

**`.outline-offset-{number}`**

Sets the outline-offset property to a specific value in pixels.

CSS equivalent: `outline-offset: {number}px;`

Example usage:

```html
<div class="outline outline-offset-4">
  <!-- Content with outline offset of 4 pixels -->
</div>
```

***

These utility classes allow you to easily control the outline width and offset of elements, providing flexibility in customizing the appearance of outlines for improved visual styling.

#### Outline Color Classes

The following utility classes control the outline color of elements:

**`.outline-{color}`**

Sets the outline-color property to a specific color value.

CSS equivalent: `outline-color: {color};`

Example usage:

```html
<div class="outline outline-red">
  <!-- Content with red outline color -->
</div>
```

***

These utility classes allow you to easily set the outline color of elements, providing a convenient way to customize the visual appearance of outlines for better design cohesion.

#### Outline Style Classes

The following classes control the style of outlines:

**`.outline`**

Sets the outline property to a default style of 1px solid.

CSS equivalent: `outline: 1px solid;`

Example usage:

```html
<div class="outline">
  <!-- Content with default outline style -->
</div>
```

***

**`.outline-style-dotted`**

Sets the outline-style property to dotted.

CSS equivalent: `outline-style: dotted;`

Example usage:

```html
<div class="outline-style-dotted">
  <!-- Content with dotted outline style -->
</div>
```

***

**`.outline-style-dashed`**

Sets the outline-style property to dashed.

CSS equivalent: `outline-style: dashed;`

Example usage:

```html
<div class="outline-style-dashed">
  <!-- Content with dashed outline style -->
</div>
```

***

**`.outline-style-double`**

Sets the outline-style property to double.

CSS equivalent: `outline-style: double;`

Example usage:

```html
<div class="outline-style-double">
  <!-- Content with double outline style -->
</div>
```

***

**`.outline-style-solid`**

Sets the outline-style property to solid.

CSS equivalent: `outline-style: solid;`

Example usage:

```html
<div class="outline-style-solid">
  <!-- Content with solid outline style -->
</div>
```

***

**`.outline-style-inset`**

Sets the outline-style property to inset.

CSS equivalent: `outline-style: inset;`

Example usage:

```html
<div class="outline-style-inset">
  <!-- Content with inset outline style -->
</div>
```

***

**`.outline-style-outset`**

Sets the outline-style property to outset.

CSS equivalent: `outline-style: outset;`

Example usage:

```html
<div class="outline-style-outset">
  <!-- Content with outset outline style -->
</div>
```

***

**`.outline-style-ridge`**

Sets the outline-style property to ridge.

CSS equivalent: `outline-style: ridge;`

Example usage:

```html
<div class="outline-style-ridge">
  <!-- Content with ridge outline style -->
</div>
```

***

**`.outline-style-groove`**

Sets the outline-style property to groove.

CSS equivalent: `outline-style: groove;`

Example usage:

```html
<div class="outline-style-groove">
  <!-- Content with groove outline style -->
</div>
```

***

**`.outline-style-initial`**

Sets the outline-style property to initial.

CSS equivalent: `outline-style: initial;`

Example usage:

```html
<div class="outline-style-initial">
  <!-- Content with initial outline style -->
</div>
```

***

**`.outline-style-inherit`**

Sets the outline-style property to inherit.

CSS equivalent: `outline-style: inherit;`

Example usage:

```html
<div class="outline-style-inherit">
  <!-- Content with inherit outline style -->
</div>
```

***

**`.outline-none`**

Sets the outline property to none.

CSS equivalent: `outline: none;`

Example usage:

```html
<div class="outline-none">
  <!-- Content with no outline -->
</div>
```

***

These utility classes allow you to easily apply different outline styles to elements, giving you flexibility in designing and customizing the appearance of outlines for visual emphasis and aesthetics.