Corner Accent Borders
A box with an almost invisible edge, marked by four coloured corner brackets that stretch from 20 to 40 px with a glow on hover, keyboard focus or tap.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Utilities has 43 effects, including 3 free. Explore the category →
3 usage examples
How it works
The .cnb-box (200 × 120 px, 12 px radius) only has a white outline at 8 % opacity, barely visible. Its four corners are held by 20 × 20 px <span class="cnb-corner"> elements placed 2 px outside the edge; each one draws only two 3 px sides (top and left for the top-left corner, and so on) with a small 4 px radius, forming a bracket. The colours go from indigo to pink around the box: #6366f1 top left, #8b5cf6 top right, #d946ef bottom right, #ec4899 bottom left.
On hover, or when something in the box has focus (:focus-within), every bracket grows to 40 × 40 px in 0.4 s on a curve that speeds up then brakes, and gets a soft shadow in its own colour at 40 %, offset 3 px outwards. That shadow belongs to the bracket's whole square: it also draws a faint darker square inside each corner, subtle on dark backgrounds, more visible on light ones.
The label is a real link, .cnb-link, whose ::after covers the whole box: the entire box is clickable, and focusing or tapping that link stretches the brackets. A button or a field placed in the box does the same, like the “Choose a file” button in the drop-zone example.
Accessibility
- Keyboard: Tab reaches the link (or button) in the box; the brackets stretch and a white ring (
--cnb-ring) appears around the box when focus comes from the keyboard. Safari only stops on links with Tab if its keyboard setting allows it (Option+Tab otherwise). - Touch: tapping the link stretches the brackets in Chromium, Firefox and WebKit (measured with a simulated touch screen); a box with nothing interactive inside would not react to a finger in WebKit.
- Reduced motion: with
prefers-reduced-motion: reduce, the brackets jump from 20 to 40 px at once, glow included, without sliding. - Box outline: the 8 % outline is not enough for everyone to see the clickable area; the brackets mark it at the corners. On a background where they show poorly, make them thicker (
--cnb-thickness).
Browser compatibility
Pure CSS, no JavaScript. Measured in Chromium 151, Firefox 153 and Playwright's WebKit 26.5: 0 errors, two independent copies, hover, Tab, touch, 390 px and reduced motion. Minimum versions from @mdn/browser-compat-data: the glow is computed with color-mix() (Chrome 111, Firefox 113, Safari 16.2); the rest needs inset for the stretched link (Chrome 87, Firefox 66, Safari 14.1).
Without color-mix(), the shadow declaration is dropped: the brackets stretch without a glow. For a glow everywhere, replace color-mix(in srgb, var(--cnb-c1) 40%, transparent) with a fixed colour such as rgba(99, 102, 241, .4).
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0772-root">
<div class="cnb-box">
<span class="cnb-corner cnb-tl"></span>
<span class="cnb-corner cnb-tr"></span>
<span class="cnb-corner cnb-br"></span>
<span class="cnb-corner cnb-bl"></span>
<a class="cnb-link" href="#corner-accent">Corner Accent</a>
</div>
</div>One-time payment, no subscription — the code is yours forever
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
--cnb-size and --cnb-size-hover |
20px and 40px |
Arm length of each bracket at rest, then on hover, focus and tap. |
--cnb-thickness |
3px |
Stroke width of the brackets. |
--cnb-c1 to --cnb-c4 |
#6366f1, #8b5cf6, #d946ef, #ec4899 |
Colour of each corner, in the order top left, top right, bottom right, bottom left; the glow uses the same colour. |
--cnb-speed |
.4s |
Duration of the stretch and of the glow fading in. |
--cnb-w and --cnb-h |
200px and 120px |
Box size; the width never exceeds the container. |
--cnb-fill |
#0a0a0f |
Box background. |
--cnb-ring |
#fff |
Colour of the keyboard focus ring. |
FAQ
color: #fff on .cnb-box. On a light card, give the content (heading, text) its own colours, set --cnb-fill to the card background and pick dark or saturated brackets, like the brass in the property developer example.box-shadow on the bracket element, which is a square with only two sides drawn. So the shadow follows the whole square. For a glow limited to the stroke, replace box-shadow in the four rules with filter: drop-shadow(0 0 6px var(--cnb-c1)) (--cnb-c2, --cnb-c3, --cnb-c4 depending on the corner): the shadow then follows the stroke shape..cnb-corner the size var(--cnb-size-hover), and back it up with text or aria-pressed so it does not rely on shape alone.
