> ## Documentation Index
> Fetch the complete documentation index at: https://skelementorcss.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Border Style

> The bundled border styles: solid, dashed, and none.

export const BorderStyleDemo = () => {
  const styles = ["solid", "dashed", "dotted", "double", "none"];
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <div className="grid grid-cols-5 gap-4">
          {styles.map(s => <div key={s} className="flex flex-col items-center gap-3">
              <span className="tw-label">border-{s}</span>
              <div style={{
    borderWidth: s === "double" ? "4px" : "3px",
    borderStyle: s,
    borderColor: "#6366f1",
    width: "100%",
    aspectRatio: "1",
    borderRadius: "0.5rem",
    background: "rgba(99, 102, 241, 0.08)"
  }} />
            </div>)}
        </div>
      </div>
    </div>;
};

## Overview

Border style utilities define how a border line is drawn. The shipped set is intentionally small and covers the common UI cases.

| Class            | Style  | CSS                     | Usage                         |
| ---------------- | ------ | ----------------------- | ----------------------------- |
| `.border-solid`  | Solid  | `border-style: solid;`  | Default border treatment      |
| `.border-dashed` | Dashed | `border-style: dashed;` | Optional or secondary framing |
| `.border-none`   | None   | `border-style: none;`   | Remove border style           |

## Example

<BorderStyleDemo />

## Examples

```html theme={null}
<div class="elementor-element border-2 border-solid padding-4 background-white rounded">
  Solid border
</div>
<div class="elementor-element border-2 border-dashed padding-4 background-white rounded">
  Dashed border
</div>
<div class="elementor-element border-0 border-none padding-4 background-gray-light rounded">
  No border
</div>
```

## Best Practices

* Use `border-solid` for most buttons, inputs, cards, and structural UI.
* Use `border-dashed` sparingly for optional, provisional, or drop-zone style patterns.
* Pair style with explicit width and color classes so the full border treatment is obvious in markup.
* Use `border-none` intentionally when a component preset adds a border you want removed.

## Related Utilities

<CardGroup cols={2}>
  <Card title="Border Width" icon="square" href="/borders/width">
    Border width utilities
  </Card>

  <Card title="Border Radius" icon="circle" href="/borders/radius">
    Border radius utilities
  </Card>
</CardGroup>