---
title: Card Styling, Radius & Shadows
description: Customize the fills, outlines, accent badges, corner rounding presets, and elevation dropshadows across all Bento cards.
sidebar:
  label: Card Styling & Radius
  icon: square
---

Click **Appearance → Block** to control the visual theme of every Bento card across your page.

---

## 1. Card Color Palette Controls

<CardGroup cols={2}>
  <Card title="Card Fill (`elementColor`)" icon="square">
    Controls the background color or semi-transparent RGBA fill of your Bento cards.
  </Card>
  <Card title="Card Text (`elementTextColor`)" icon="type">
    Controls headings, titles, and body descriptions inside cards.
  </Card>
  <Card title="Border / Stroke (`elementStrokeColor`)" icon="box">
    Sets the subtle 1px border outline around cards.
  </Card>
  <Card title="Accent Fill (`elementSecondaryColor`)" icon="tag">
    Tints badges, pill chips, and secondary interactive elements.
  </Card>
</CardGroup>

---

## 2. Corner Radius Presets

Click any of the 6 presets to adjust corner curvature site-wide:

| Preset Label | Radius Value | Visual Aesthetic |
| :--- | :--- | :--- |
| **None** | `0px` | Sharp corners / Brutalist editorial |
| **XS** | `4px` | Subtle modern tech rounding |
| **S** | `8px` | Clean classic UI |
| **MD** | `12px` | Balanced modern card |
| **L** | `16px` | Apple iOS standard curvature |
| **XL** | `24px` | Extra soft Bento aesthetic |

---

## 3. Card Dropshadows & Glows

<Badge variant="accent">Pro Feature</Badge>

- **Enable Shadows**: Toggle elevation depth dropshadows across all Bento cards.
- **Shadow Color Picker**: Customize shadow hue (e.g. subtle dark shadow `rgba(0,0,0,0.08)` or colorful neon ambient glow).