Border

Border-radius, border, and shadow-reset escape hatches. All classes emit with !important so they reliably beat component-level rules.

How it works

• .is-rounded resolves at runtime via var(--kc-border-radius, <fallback>) where the fallback mirrors variables.$global-border-radius. Overriding --kc-border-radius at any scope re-tints rounded corners across the page without recompiling.
• .is-radiusless, .is-circle, and .is-pill emit fixed values (0, 50%, and $pill-radius respectively).
• .is-bordered uses a 50 % currentColor mix in color-mix(in srgb, …, transparent). This matches the form-control border treatment and clears WCAG 1.4.11 (3 : 1 non-text contrast) against either theme background — adopt it when you need a divider that adapts to the surrounding colour.
• .is-borderless and .is-shadowless are pure resets: useful when a component default ships a border or shadow you want to suppress for a single instance.

Live

<div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;">
<div class="is-rounded" style="background: var(--kc-primary-bg); color: var(--kc-primary-fg); padding: 0.6rem 1rem;">.is-rounded</div>
<div class="is-pill" style="background: var(--kc-success-bg); color: var(--kc-success-fg); padding: 0.4rem 1rem;">.is-pill</div>
<div class="is-circle" style="background: var(--kc-warning-bg); color: var(--kc-warning-fg); width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center;">◐</div>
<div class="is-radiusless" style="background: var(--kc-danger-bg); color: var(--kc-danger-fg); padding: 0.6rem 1rem;">.is-radiusless</div>
</div>

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'helper-border')
);

<div class="is-bordered" style="padding: 0.6rem 1rem;">
This block borrows half of <code>currentColor</code> for its border.
</div>

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'helper-border')
);

Markup

<!-- Standard rounded corner (reads --kc-border-radius) -->
<div class="is-rounded">…</div>

<!-- Strip corner radius -->
<button class="is-radiusless">…</button>

<!-- Avatar / icon shapes -->
<img class="is-circle" src="…" alt="" />
<button class="is-pill">Filter</button>

<!-- 50% currentColor mix — clears WCAG 1.4.11 3:1 against either theme -->
<div class="is-bordered">…</div>

<!-- Strip borders or shadows added by a component default -->
<input class="is-borderless" />
<div class="is-shadowless">…</div>

Class reference

Variables

Override example

@use '@adnap/krysalicss/helper/border' with (
  // Reroute the custom-property token (e.g. share with a design system):
  $border-radius-token: 'radius-md',
  // Or change the pill shorthand:
  $pill-radius: 9999px,
);

// To change the default radius value across the framework, override the
// upstream global token instead:
@use '@adnap/krysalicss/variables/global' with (
  $global-border-radius: 0.5rem,
);

Tokens consumed

.is-bordered reads currentColor rather than a --kc-* token, so its border adapts to whatever the foreground colour resolves to in context (per-theme, per-component, per-state).