diff --git a/packages/uui-box/lib/uui-box.element.ts b/packages/uui-box/lib/uui-box.element.ts index 146ba8aa5..76f81d382 100644 --- a/packages/uui-box/lib/uui-box.element.ts +++ b/packages/uui-box/lib/uui-box.element.ts @@ -20,6 +20,9 @@ function slotHasContent(target: EventTarget | null): boolean { * @slot - area for the content of the box * @cssprop --uui-box-header-padding - overwrite the header padding * @cssprop --uui-box-default-padding - overwrite the box padding + * @cssprop --uui-box-border-width - overwrite the box border, default is 0 + * @cssprop --uui-box-box-shadow - overwrite the box shadow, default is var(--uui-shadow-depth-1) + * @cssprop --uui-box-border-radius - overwrite the box border-radius, default is var(--uui-border-radius) * */ @defineElement('uui-box') @@ -119,8 +122,11 @@ export class UUIBoxElement extends LitElement { css` :host { display: block; - box-shadow: var(--uui-shadow-depth-1); - border-radius: var(--uui-border-radius); + border: var(--uui-box-border-width, 0) solid + var(--uui-color-divider-standalone); + + box-shadow: var(--uui-box-box-shadow, var(--uui-shadow-depth-1)); + border-radius: var(--uui-box-border-radius, var(--uui-border-radius)); background-color: var(--uui-color-surface); }