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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://codennerd.gitbook.io/cxcss/product-guides/border/outline.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.