Pure CSSMIT licensed

Liquid Border

Animated stroke that draws around the field on focus. A small flourish that makes a single text input feel deliberate and premium.

Published May 4, 2026

Live Demo

Try it

The code

<label class="if-06">
  <span class="if-06-label">Project name</span>
  <input type="text" name="project" placeholder="My next big idea…" required />
</label>

<label class="if-06">
  <span class="if-06-label">Project name</span>
  <input type="text" name="project" placeholder="My next big idea…" required />
</label>

.if-06 {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
  font-size: 11px;
  color: #b8b6d4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.if-06 input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  background: #1a1a22;
  border: 1px solid #2a2a36;
  border-radius: 8px;
  color: #f0eeff;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  outline: none;
  background-image: linear-gradient(90deg, #fbbf24, #fbbf24), linear-gradient(0deg, #fbbf24, #fbbf24), linear-gradient(90deg, #fbbf24, #fbbf24), linear-gradient(0deg, #fbbf24, #fbbf24);
  background-repeat: no-repeat;
  background-size: 0 2px, 2px 0, 0 2px, 2px 0;
  background-position: 0 0, 100% 0, 100% 100%, 0 100%;
  transition: background-size 0.35s linear, border-color 0.2s;
}

.if-06 input::placeholder {
  color: #b8b6d4;
}

.if-06 input:focus {
  border-color: transparent;
  background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
  transition-delay: 0s, 0.35s, 0.7s, 1.05s;
  transition-duration: 0.35s;
}

.if-06 {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
  font-size: 11px;
  color: #b8b6d4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.if-06 input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  background: #1a1a22;
  border: 1px solid #2a2a36;
  border-radius: 8px;
  color: #f0eeff;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  outline: none;
  background-image: linear-gradient(90deg, #fbbf24, #fbbf24), linear-gradient(0deg, #fbbf24, #fbbf24), linear-gradient(90deg, #fbbf24, #fbbf24), linear-gradient(0deg, #fbbf24, #fbbf24);
  background-repeat: no-repeat;
  background-size: 0 2px, 2px 0, 0 2px, 2px 0;
  background-position: 0 0, 100% 0, 100% 100%, 0 100%;
  transition: background-size 0.35s linear, border-color 0.2s;
}

.if-06 input::placeholder {
  color: #b8b6d4;
}

.if-06 input:focus {
  border-color: transparent;
  background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
  transition-delay: 0s, 0.35s, 0.7s, 1.05s;
  transition-duration: 0.35s;
}

Here's a working CSS Input Field from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Liquid Border
Source: https://codefronts.com/components/css-input-fields/liquid-border/

Animated stroke that draws around the field on focus. A small flourish that makes a single text input feel deliberate and premium.
## HTML
```html
<label class="if-06">
  <span class="if-06-label">Project name</span>
  <input type="text" name="project" placeholder="My next big idea…" required />
</label>
```
## CSS
```css
.if-06 {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
  font-size: 11px;
  color: #b8b6d4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.if-06 input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  background: #1a1a22;
  border: 1px solid #2a2a36;
  border-radius: 8px;
  color: #f0eeff;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  outline: none;
  background-image: linear-gradient(90deg, #fbbf24, #fbbf24), linear-gradient(0deg, #fbbf24, #fbbf24), linear-gradient(90deg, #fbbf24, #fbbf24), linear-gradient(0deg, #fbbf24, #fbbf24);
  background-repeat: no-repeat;
  background-size: 0 2px, 2px 0, 0 2px, 2px 0;
  background-position: 0 0, 100% 0, 100% 100%, 0 100%;
  transition: background-size 0.35s linear, border-color 0.2s;
}

.if-06 input::placeholder {
  color: #b8b6d4;
}

.if-06 input:focus {
  border-color: transparent;
  background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
  transition-delay: 0s, 0.35s, 0.7s, 1.05s;
  transition-duration: 0.35s;
}
```

Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.

Here's a working CSS Input Field from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Liquid Border
Source: https://codefronts.com/components/css-input-fields/liquid-border/

Animated stroke that draws around the field on focus. A small flourish that makes a single text input feel deliberate and premium.
## HTML
```html
<label class="if-06">
  <span class="if-06-label">Project name</span>
  <input type="text" name="project" placeholder="My next big idea…" required />
</label>
```
## CSS
```css
.if-06 {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
  font-size: 11px;
  color: #b8b6d4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.if-06 input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  background: #1a1a22;
  border: 1px solid #2a2a36;
  border-radius: 8px;
  color: #f0eeff;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  outline: none;
  background-image: linear-gradient(90deg, #fbbf24, #fbbf24), linear-gradient(0deg, #fbbf24, #fbbf24), linear-gradient(90deg, #fbbf24, #fbbf24), linear-gradient(0deg, #fbbf24, #fbbf24);
  background-repeat: no-repeat;
  background-size: 0 2px, 2px 0, 0 2px, 2px 0;
  background-position: 0 0, 100% 0, 100% 100%, 0 100%;
  transition: background-size 0.35s linear, border-color 0.2s;
}

.if-06 input::placeholder {
  color: #b8b6d4;
}

.if-06 input:focus {
  border-color: transparent;
  background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
  transition-delay: 0s, 0.35s, 0.7s, 1.05s;
  transition-duration: 0.35s;
}
```

How this works

The border effect uses four background layers — one per side — sized 0 2px or 2px 0 and positioned at each corner. On :focus the sizes animate to 100% in sequence via staggered transition-delay, so the stroke draws top, right, bottom, left in a continuous sweep.

This is the pure-CSS take on an @property animated border input — no JavaScript, no SVG, no keyframes. The base border-color fades to transparent as the animated backgrounds take over, and reversing focus rewinds the whole sequence for free.

Make it yours

Swap the four linear-gradient(#fbbf24…) stops for a brand accent or a two-stop gradient for a subtle colour shift.
Tune sweep speed by scaling the 0.35s duration and the matched 0s / 0.35s / 0.7s / 1.05s delays proportionally.
Bump stroke weight by widening the 2px track in both background-size declarations.
Restyle at rest with border-radius and the #2a2a36 resting border colour.

Gotchas — read before shipping

The delay chain must match the duration — change one without the other and the sides overlap or leave gaps at the corners.
Rounded corners above ~10px let the flat stroke peek outside the radius; keep border-radius modest or clip with overflow: hidden on a wrapper.
Background layers stack over the border, so a coloured :focus border-color will still show at the corners unless set to transparent.

Browser support

Chrome	Safari	Firefox	Edge
85+	16.4+	84+	85+

Works in every evergreen browser; no @property needed since only background-size is animated.