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

# Borders

> Border width, style, radius, and color utilities for defining element boundaries.

<div className="sk-theme-hero not-prose">
  <img style={{ borderRadius: "0.5rem", width: "100%", height: "auto" }} src="https://mintcdn.com/skelementor/4oZ9ucvfw4_Z4_Bt/images-for-overview/Borders.png?fit=max&auto=format&n=4oZ9ucvfw4_Z4_Bt&q=85&s=1505ccb9ec13cc86f0442f83883e1f85" className="dark:hidden block" alt="Borders overview cover" width="4054" height="2489" data-path="images-for-overview/Borders.png" />

  <img style={{ borderRadius: "0.5rem", width: "100%", height: "auto" }} src="https://mintlify.s3.us-west-1.amazonaws.com/skelementor/images-for-overview/Borders%20-%20Dark.png" className="hidden dark:block" alt="Borders overview cover (dark)" />
</div>

## Overview

Border utilities cover width, style, radius, and color in one system, including side-specific border widths and directional corner rounding.

<CardGroup cols={2}>
  <Card title="Width" icon="square" href="/borders/width">
    Bundled border-width scale from `border-0` through `border-20`
  </Card>

  <Card title="Style" icon="square" href="/borders/style">
    Border style utilities: solid, dashed, and none
  </Card>

  <Card title="Radius" icon="circle" href="/borders/radius">
    Border radius utilities for rounded corners
  </Card>

  <Card title="Border Colors" icon="palette" href="/colors/border-colors">
    Bundled color utilities for soft, neutral, and accent borders
  </Card>
</CardGroup>

## Common Patterns

* Use `border-gray-light` for soft section and card separation.
* Use `border-gray` or `border-black` when structure needs more contrast.
* Use `border-primary` for the main bundled accent border.
* Use side-specific widths and directional rounding for tabs, panels, and emphasized edges.
* Keep width, style, color, and radius explicit in markup for clarity.

## Related Utilities

<CardGroup cols={2}>
  <Card title="Colors" icon="palette" href="/concepts/colors">
    Color utilities for border colors
  </Card>

  <Card title="Spacing" icon="arrows-to-line" href="/concepts/spacing">
    Padding utilities for internal border spacing
  </Card>
</CardGroup>