# NodeStyle

Import it from `@grafloria/engine`.

```ts
interface NodeStyle
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `shape?` | `string` |  |  |
| `selection?` | `NodeSelectionLook` |  | How this node shows it is selected — see {@link NodeSelectionLook}. A style property like any other: set it per node, in a named style, per node type (`theme.nodes[type]`) or theme-wide (`theme.nodes.default`). |
| `className?` | `string` |  | Extra CSS class(es) put verbatim on the rendered element, alongside `diagram-node` and the state classes. Purely a hook for host CSS — the renderer never reads it back (React Flow's "className on every element"). |
| `styleClass?` | `string` |  | Name(s) of NAMED STYLES to apply — the classDef / linkStyle equivalent. Space-separated (`'critical dashed'`, later names win). Defined with `defineStyle(name, style)` and resolved by the renderer's cascade: theme < type-default < named-class < element-inline < state so an own property on this style object always beats the named style. |
| `fill?` | `string \| LinearGradient \| RadialGradient \| Pattern` |  |  |
| `stroke?` | `string \| LinearGradient \| RadialGradient \| Pattern` |  |  |
| `strokeWidth?` | `number` |  |  |
| `strokeDasharray?` | `string` |  |  |
| `opacity?` | `number` |  |  |
| `shadow?` | `boolean \| Shadow` |  |  |
| `borderRadius?` | `number` |  |  |
| `fontSize?` | `number` |  |  |
| `fontFamily?` | `string` |  |  |
| `fontWeight?` | `string` |  |  |
| `fontStyle?` | `string` |  |  |
| `textDecoration?` | `string` |  |  |
| `color?` | `string` |  |  |
| `padding?` | `number` |  |  |
| `zIndex?` | `number` |  |  |
| `animatedBorder?` | `boolean` |  |  |
| `borderAnimationType?` | `'gradient' \| 'pulse' \| 'breathe' \| 'shimmer' \| 'none'` |  |  |
| `borderAnimationSpeed?` | `number` |  |  |
| `borderAnimationColors?` | `string[]` |  |  |