> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.templated.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Borders and Shadows

# Borders and Shadows

Add visual depth to your layers with borders and shadow effects.

## Borders

### Properties

| Property | Description | Example |
| ---- |
| `border_width` | Thickness in pixels | `2` |
| `border_color` | Border color (hex) | `"#000000"` |
| `border_radius` | Corner rounding | `10` or `"50%"` |
| `border_style` | Line style | `"solid"`, `"dashed"`, `"dotted"` |

### API Example
```json
{
  "layers": {
    "image-1": {
      "image_url": "https://example.com/photo.jpg",
      "border_width": 3,
      "border_color": "#FF0000",
      "border_radius": 15
    }
  }
}
```

### Rounded Corners
* `border_radius: 0` — Square corners
* `border_radius: 10` — Slightly rounded
* `border_radius: "50%"` — Circle (for square images)

## Shadows

Shadows are configured in the Editor and applied via CSS.

### In Editor
1. Select a layer
2. Go to **Image Effects** or **Text Effects**
3. Enable **Shadow**
4. Adjust:
* **Blur** — Softness (0-50px)
* **Offset X/Y** — Position
* **Color** — Shadow color
* **Opacity** — Transparency

### Shadow Types

**Drop Shadow** — Classic shadow below element
```
blur: 10px, offset: 5px 5px, color: rgba(0,0,0,0.3)
```

**Glow Effect** — Shadow all around
```
blur: 20px, offset: 0 0, color: rgba(255,255,0,0.5)
```

**Hard Shadow** — No blur for retro look
```
blur: 0, offset: 4px 4px, color: #000000
```

## Combining Effects

Layer multiple effects for depth:
1. Border for definition
2. Shadow for elevation
3. Border radius for softness