# Border style

The following classes control the border style of elements:

## `.border-dashed`

Sets the border-style property to dashed, creating a dashed line border.

CSS equivalent: `border-style: dashed;`

Example usage:

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

***

## `.border-dotted`

Sets the border-style property to dotted, creating a dotted line border.

CSS equivalent: `border-style: dotted;`

Example usage:

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

***

## `.border-double`

Sets the border-style property to double, creating a double line border.

CSS equivalent: `border-style: double;`

Example usage:

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

***

## `.border-none`

Sets the border-style property to none, removing the border.

CSS equivalent: `border-style: none;`

Example usage:

```html
<div class="border-none">
  <!-- Content without border -->
</div>
```

***

## `.border-solid`

Sets the border-style property to solid, creating a solid line border.

CSS equivalent: `border-style: solid;`

Example usage:

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

***

## `.border-inset`

Sets the border-style property to inset, creating an inset border.

CSS equivalent: `border-style: inset;`

Example usage:

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

***

## `.border-outset`

Sets the border-style property to outset, creating an outset border.

CSS equivalent: `border-style: outset;`

Example usage:

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

***

## `.border-hidden`

Sets the border-style property to hidden, hiding the border.

CSS equivalent: `border-style: hidden;`

Example usage:

```html
<div class="border-hidden">
  <!-- Content with hidden border -->
</div>
```

***

## `.border-ridge`

Sets the border-style property to ridge, creating a ridge border.

CSS equivalent: `border-style: ridge;`

Example usage:

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

***

## `.border-groove`

Sets the border-style property to groove, creating a groove border.

CSS equivalent: `border-style: groove;`

Example usage:

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

***

These utility classes allow you to easily control the border style of elements, providing various options to achieve the desired visual effect for your borders.


---

# 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/border-style.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.