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

# Borders

The border properties in `appearance.border` allow you to customize the style, width and color of borders around your graphs. You can create subtle strokes, bold frames, gradient effects or completely custom border styles.

## Quick start

Borders are controlled by three properties that work together:

```tsx theme={null}
import type { GraphConfig } from '@graphysdk/core';

const config: GraphConfig = {
  appearance: {
    border: {
      width: 12, // Width in pixels
      style: 'gradient', // Visual style
      color: '#6366f1', // Color or preset name
    },
  },
};
```

## Border width

Control the thickness of your border using `width`. Set to `0` to remove the border completely.

```tsx theme={null}
appearance: {
  border: {
    width: 0; // No border
  }
}

appearance: {
  border: {
    width: 12; // 12px border
  }
}

appearance: {
  border: {
    width: 1; // 1px thin border
  }
}
```

<ParamField path="appearance.border.width" type="number" default="0">
  Border width in pixels (0-64). Set to `0` for no border.
</ParamField>

## Border styles

Use `style` to control how your border appears. Each style treats `color` differently, helping frame your data without stealing the spotlight:

<ParamField path="appearance.border.style" type="'none' | 'custom' | 'tinted' | 'gradient' | 'preset' | 'grey'" default="none">
  Border style: - `'none'` - No border - `'custom'` - Apply the custom hex color from `color` as-is - `'tinted'` - Tint
  the `color` based on the color scheme (darkens in dark mode, lightens in light mode) - `'gradient'` - Generate a
  gradient starting from `color`, adjusted based on the color scheme - `'preset'` - Use a predefined border style -
  `'grey'` - Legacy grey border style
</ParamField>

### Tinted

A color border that's subtly tinted based on your chosen color and the graph's theme:

```tsx theme={null}
appearance: {
  border: {
    width: 12,
    style: 'tinted',
    color: '#3b82f6'  // Automatically tinted for contrast
  }
}
```

### Gradient

Automatically generates a linear gradient based on your chosen color and the graph's theme:

```tsx theme={null}
appearance: {
  border: {
    width: 12,
    style: 'gradient',
    color: '#8b5cf6'  // Creates theme-adjusted gradient
  }
}
```

### Grey

A neutral border that adapts to light and dark themes. Perfect for subtle definition without drawing attention:

```tsx theme={null}
appearance: {
  border: {
    width: 1,
    style: 'grey'
    // color not required
  }
}
```

### Preset

Use one of twelve predefined gradient styles. Set `color` to one of these preset names:

```tsx theme={null}
appearance: {
  border: {
    width: 12,
    style: 'preset',
    color: 'sunset'  // or any preset name below
  }
}
```

**Available presets:**

* `'lilac'` - Soft purple to pink
* `'neon_pink'` - Vibrant pink gradient
* `'blackberry'` - Purple to light blue
* `'sun'` - Yellow to orange
* `'iceland'` - Teal gradient
* `'sunset'` - Yellow to pink
* `'ultraviolet'` - Purple gradient
* `'purple'` - Rich purple tones
* `'ice_cream'` - Pink to peach
* `'mint'` - Green to cyan
* `'cool'` - Blue to cyan
* `'fresh'` - Purple to cyan

### Custom

Use your exact color with no adjustments. Unlike `tinted` and `gradient`, `custom` applies your color as-is with no theme-based tinting:

```tsx theme={null}
appearance: {
  border: {
    width: 12,
    style: 'custom',
    color: '#ff6b6b'  // Exact color used as-is
  }
}
```

## Border colors

<ParamField path="appearance.border.color" type="string" optional>
  The color to use for the border. Accepts: - **Hex colors**: `"#3b82f6"`, `"#ff6b6b"` - **Preset names** (when `style:
      'preset'`): `"lilac"`, `"sunset"`, `"ultraviolet"`, etc. - **Series references**: `"series1"`, `"series2"` (uses color
  from series styles) The color may be adjusted based on theme and `style` for optimal visual appearance.
</ParamField>

### Hex colors

Standard hex color values work with `tinted`, `gradient` and `custom` styles:

```tsx theme={null}
appearance: {
  border: {
    style: 'tinted',
    color: '#3b82f6'
  }
}
```

### Preset names

When using `style: 'preset'`, reference one of the predefined gradients:

```tsx theme={null}
appearance: {
  border: {
    style: 'preset',
    color: 'sunset'
  }
}
```

### Series references

Match your border to a series color by referencing the series key:

```tsx theme={null}
const config: GraphConfig = {
  appearance: {
    border: {
      width: 12,
      style: 'tinted',
      color: 'series1',
    },
    seriesStyles: {
      series1: { customColor: '#10b981' },
    },
  },
};
```

## Rounded corners

<ParamField path="appearance.hasRoundedCorners" type="boolean" default="true" optional>
  Whether to round the corners of the border. Ignored if `border.width` is 0.
</ParamField>

```tsx theme={null}
appearance: {
  border: {
    width: 12,
    style: 'gradient',
    color: '#6366f1'
  },
  hasRoundedCorners: true  // Rounded corners
}
```