.ui-border,
.ui-border\@s {
  box-shadow: 0 0 0 2px var(--_ui-border-color, rgb(0 0 0 / 0.15)) !important;
}
.ui-border\@xs {
  box-shadow: 0 0 0 1px var(--_ui-border-color, rgb(0 0 0 / 0.15)) !important;
}
.ui-border\@m {
  box-shadow: 0 0 0 3px var(--_ui-border-color, rgb(0 0 0 / 0.15)) !important;
}
.ui-border\@l {
  box-shadow: 0 0 0 4px var(--_ui-border-color, rgb(0 0 0 / 0.15)) !important;
}
.ui-border\@xl {
  box-shadow: 0 0 0 6px var(--_ui-border-color, rgb(0 0 0 / 0.15)) !important;
}

.ui-border\:default {
  --_ui-border-color: var(--color-default);
}
.ui-border\:primary {
  --_ui-border-color: var(--color-primary);
}
.ui-border\:secondary {
  --_ui-border-color: var(--color-secondary);
}
.ui-border\:success {
  --_ui-border-color: var(--color-success);
}
.ui-border\:warning {
  --_ui-border-color: var(--color-warning);
}
.ui-border\:danger {
  --_ui-border-color: var(--color-danger);
}
.ui-border\:info {
  --_ui-border-color: var(--color-info);
}
.ui-border\:brand {
  --_ui-border-color: var(--color-brand);
}
.ui-border\:accent {
  --_ui-border-color: var(--color-accent);
}