CORE UTILITY FAMILY

Borders, outlines, rings, and divide

Define physical and logical border widths and colors, styles, corner radii, accessible outlines, outward and inset rings, legacy ring offsets, and complete dividers between children.

completeTarget v0.39 verified examplesRegistry JSON ↗

WHEN TO USE IT

Choose the right tool for the layout.

Use borders for element geometry, outlines for keyboard focus without layout movement, rings for composable focus treatment, and divide utilities only when sibling separators belong to the parent layout.

QUICK REFERENCE

Classes and generated CSS

These examples are resolved by the compiler when the registry manifest is generated. A broken example fails the test suite.

ClassGenerated declarations and keyframes

co-border-bs-2border-block-start-width: 2px;

co-border-e-brand-500/50border-inline-end-color: color-mix(in oklab, var(--co-color-brand-500) 50%, transparent);

co-rounded-se-(--radius)border-start-end-radius: var(--radius);

focus:co-outline-2outline-width: 2px;

-co-outline-offset-2outline-offset: calc(2px * -1);

co-ring-2

--co-ring-offset-shadow: 0 0 0 var(--co-ring-offset-width, 0px) var(--co-ring-offset-color, transparent); --co-ring-shadow: 0 0 0 calc(2px + var(--co-ring-offset-width, 0px)) var(--co-ring-color, currentColor); box-shadow: var(--co-inset-ring-shadow, 0 0 #0000), var(--co-ring-offset-shadow, 0 0 #0000), var(--co-ring-shadow, 0 0 #0000), var(--co-shadow, 0 0 #0000);

co-inset-ring-brand-500--co-inset-ring-color: var(--co-color-brand-500);

co-divide-x-reverse--co-divide-x-reverse: 1;

co-divide-dashedborder-style: dashed;

VISUAL EXAMPLE · WIDTH AND COLOR

Define the edge of a surface

Compose border width, style, and color independently. Axis and side utilities let one edge carry more emphasis than the others.

co-border

co-border-2

co-border-b-4

component.coord

<div class="co-border co-border-neutral-300">Default border</div>
<div class="co-border-2 co-border-brand-500">Brand border</div>
<div class="co-border-b-4 co-border-black">Strong bottom edge</div>

VISUAL EXAMPLE · LOGICAL EDGES

Move emphasis with reading direction

Logical start and end borders automatically map to the correct physical side in LTR, RTL, and vertical writing modes.

component.coord

<aside dir="ltr" class="co-border-s-4 co-border-s-brand-500 co-ps-5">English notice</aside>
<aside dir="rtl" class="co-border-s-4 co-border-s-brand-500 co-ps-5">تنبيه عربي</aside>

VISUAL EXAMPLE · BORDER RADIUS

Shape complete surfaces or selected corners

Use named radius tokens for consistent geometry. Logical corner utilities remain correct when document direction changes.

2xl

full

rounded-se

component.coord

<div class="co-rounded-md">Medium</div>
<div class="co-rounded-2xl">Large card</div>
<span class="co-rounded-full">Pill</span>
<div class="co-rounded-se-3xl">Logical end corner</div>

VISUAL EXAMPLE · FOCUS OUTLINE

Show keyboard focus without moving layout

Outlines sit outside the border and do not affect element dimensions. Prefer focus-visible so keyboard users receive a strong indicator without adding noise to pointer interaction.

component.coord

<button class="co-rounded-md co-border co-px-4 co-py-2 focus-visible:co-outline-2 focus-visible:co-outline-offset-2 focus-visible:co-outline-brand-500">
  Focus me
</button>

VISUAL EXAMPLE · RINGS

Compose outward and inset emphasis

Rings use shadow layers, so they can sit outside or inside a component without changing its measured size. Combine both only when each layer has a clear purpose.

ring-2

inset-ring-2

combined

component.coord

<div class="co-rounded-lg co-ring-2 co-ring-brand-500">Outward ring</div>
<div class="co-rounded-lg co-inset-ring-2 co-inset-ring-black">Inset ring</div>
<div class="co-rounded-lg co-ring-2 co-ring-black co-inset-ring-2 co-inset-ring-white">Combined</div>

VISUAL EXAMPLE · DIVIDERS

Separate siblings from their parent

Divide utilities apply borders between direct children, keeping the first and last outer edges untouched.

Profile
Notifications
Security

component.coord

<ul class="co-divide-y co-divide-neutral-300">
  <li class="co-py-4">Profile</li>
  <li class="co-py-4">Notifications</li>
  <li class="co-py-4">Security</li>
</ul>

BASIC USAGE

Apply a utility directly.

Keep the complete class string in your template so the plain-text scanner can discover it without evaluating application code.

component.coord

<div class="co-border-bs-2 co-border-e-brand-500/50 co-rounded-se-(--radius) focus:co-outline-2 -co-outline-offset-2 co-ring-2 co-inset-ring-brand-500 co-divide-x-reverse co-divide-dashed">
  Your content
</div>

HOW IT WORKS

Core concepts

01
Physical and logical border axes accept numeric pixels, typed custom properties, and safe arbitrary lengths.
02
Every border edge accepts theme, inherited, current, transparent, arbitrary, and slash-opacity colors.
03
Radius tokens and custom values apply to complete boxes, physical sides, logical sides, and individual corners.
04
Outward and inset rings compose with each other and ordinary shadows through shared custom properties.
05
Divide width, reverse direction, color, and style target every direct child except the last.

CSS PROPERTIES

What this family controls

border-widthborder-styleborder-colorborder-radiusoutline-widthoutline-styleoutline-coloroutline-offsetbox-shadow

VARIANTS

Responsive and state conditions

Prefix any supported utility with responsive or state variants. Variants compose from left to right and the compiler emits the required selector or at-rule.

component.coord

<div class="co-border-bs-2 md:co-border-e-brand-500/50 hover:co-border-bs-2">
  Responsive and state-aware content
</div>

ARBITRARY VALUES

Escape the scale when necessary

Use square brackets for a one-off CSS value. Prefer theme tokens for values repeated across components so an AI agent and human reviewer can recognize design intent.

Arbitrary syntax

co-border-*
co-[content-visibility:auto]

NEGATIVE VALUES

Reverse supported values

Place the minus sign before the framework prefix. Only properties where negative CSS values are meaningful accept this modifier.

Canonical negative syntax

-co-{utility}
-co-outline-offset-2

SCOPE BOUNDARIES

Intentional boundaries

This family is implemented, documented, and tested. These notes define where a neighboring family or browser behavior takes over.

The ring-offset utilities remain as a compatibility extension even though current Tailwind-style rings no longer require an offset layer.
Logical corners and edges follow writing mode and direction, so visual placement changes intentionally in RTL or vertical text.

Previous← Backgrounds, gradients, and colors NextEffects, filters, and masks →