# Styles · Style

Choose how a surface responds to light without changing its base styles.

Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/docs/styles/

<a id="compare-styles"></a>

## Compare the edge response

Choose a style and move your pointer around the card. The selection also updates this site’s cards, code blocks and navigation surfaces.

Compare edge styles

```tsx
const light = useLight();
const surface = useSurface(light, { edgeStyle: "raised" });

<Card ref={surface}>
  Your component
</Card>
```

<a id="options"></a>

## Style values

| Value | Behavior |
| --- | --- |
| `raised` | Highlights the edge facing the light. Default. |
| `recessed` | Draws the highlight one decorative edge thickness inward. Preserves the selected light direction. |
| `matte` | Softens the edge response. |

For additional settings, see the [API reference](https://edge.bolerish.com/docs/react/surface/#lighting-surface).

<a id="raised"></a>

## Raised

Use `edgeStyle: 'raised'` for an outward-facing edge highlight.

<a id="recessed"></a>

## Recessed

Use `edgeStyle: 'recessed'` for a highlight inset by one decorative edge thickness, such as on input wrappers. It preserves the selected light direction.

<a id="matte"></a>

## Matte

Use `edgeStyle: 'matte'` for a softer, quieter border.

<a id="customize-the-highlight"></a>

## Customize the highlight

Each surface uses its own text color, even when nested, and follows its element's border radius. Set `color` to override the highlight, or `intensity` to multiply the shared light strength. Use `shadowColor="transparent"` to remove the opposite-edge shadow. `borderWidth` changes the decoration thickness in pixels, not the element's border. Pass options to [Edge.Surface](https://edge.bolerish.com/docs/react/surface/#lighting-surface); no CSS variable declarations are needed.

The effect approximates a direction on axis-aligned rectangles, not a physical point light. Near the center, directional intensity fades over a region proportional to the surface size.

For existing decorations and input wrappers, see [Integration considerations](https://edge.bolerish.com/docs/integration/).