# panelChrome

> The border and rounding a bordered, framed panel applies to its own host element — the outer frame a scrollable region, a hierarchical tree, an expand/collapse section, or a row list draws itself as, before any of its own padding, layout, or interaction styling layers on top.

```ts
import { panelChrome } from "@sdxc/ui/styles";
```

A framed panel's shared border and rounding: a solid, 1px neutral border
with large rounding, sized through the shared radius and border variables.
Compose it in a host's `mix` array alongside that host's own local styles.

## Signature

```ts
panelChrome<Node extends Element = Element>(): MixinDescriptor<
	Node,
	[styles: CSSStyles],
	ElementProps
>
```

Returns: A mixin ready for a host element's `mix` prop.

## Examples

```tsx
<div
	mix={[
		panelChrome(),
		css({
			paddingBlock: "0.5rem",
			paddingInline: "0.5rem",
			outline: "none",
		}),
	]}
>
	{children}
</div>;
```