22 CSS Transition Effects 07 / 22

Border Animation Transition

Eight border effects: clockwise draw, glow pulse, rotating gradient border, corner expand, width pulse, dashed-to-solid, colour shift, double ring plus input focus states.

Pure CSS MIT licensed
Live Demo Open in tab

This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.

Open in playground

The code

<div class="wrap">
  <h1>CSS Border Animations</h1>
  <p class="sub">8 border transition techniques — hover each card to trigger the effect</p>

  <span class="sl">Card border effects</span>
  <div class="grid">
    <div class="bcard b-draw">
      <span class="side-l"></span><span class="side-r"></span>
      <h3>Draw Border</h3><p>The border draws itself clockwise from top-left using pseudo-elements with width/height transitions.</p>
    </div>
    <div class="bcard b-glow">
      <h3>Glow Pulse</h3><p>Border fades from dim to bright with a multi-layer box-shadow for the neon bloom effect.</p>
    </div>
    <div class="bcard b-rotate">
      <h3>Gradient Border</h3><p>gradient-border via background-clip:border-box — animates through the colour wheel on hover.</p>
    </div>
    <div class="bcard b-corner">
      <h3>Corner Expand</h3><p>Corner tick marks grow to trace the full perimeter — two pseudo-elements, staggered transitions.</p>
    </div>
    <div class="bcard b-pulse">
      <h3>Width Pulse</h3><p>Border-width grows from 1px to 3px instantly and color brightens for a sharp attention signal.</p>
    </div>
    <div class="bcard b-style">
      <h3>Dashed → Solid</h3><p>Dashed border snaps to solid and gains a soft inset glow on hover.</p>
    </div>
    <div class="bcard b-wipe">
      <h3>Colour Shift</h3><p>The simplest border transition — just a color change, but well-timed it feels polished.</p>
    </div>
    <div class="bcard b-double">
      <h3>Double Ring</h3><p>Outline expands outward from the border — outline-offset creates the gap ring effect.</p>
    </div>
  </div>

  <span class="sl">Input field border focus states</span>
  <div class="inputs-row">
    <div class="input-group">
      <label>Glow focus</label>
      <input class="inp inp-1" type="text" placeholder="click to focus…">
    </div>
    <div class="input-group">
      <label>Underline focus</label>
      <input class="inp inp-2" type="text" placeholder="click to focus…">
    </div>
    <div class="input-group">
      <label>Gradient border</label>
      <input class="inp inp-3" type="text" placeholder="click to focus…">
    </div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=Outfit:wght@400;600;700;800&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Outfit',sans-serif;background:#08090e;color:#e8eaf6;min-height:100vh;padding:60px 24px}
.wrap{max-width:1100px;margin:0 auto}
h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:800;text-align:center;margin-bottom:8px;letter-spacing:-.03em}
.sub{text-align:center;color:#6b7280;margin-bottom:56px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px;margin-bottom:48px}
.grid-sm{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:48px}
.sl{font-size:.68rem;font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:#6b7280;margin-bottom:12px;display:block}
h2{font-size:1.3rem;font-weight:700;margin-bottom:20px}

/* shared card base */
.bcard{padding:28px 24px;border-radius:12px;cursor:default;position:relative}
.bcard h3{font-size:1rem;font-weight:700;margin-bottom:6px}
.bcard p{font-size:.82rem;color:#9ca3af;line-height:1.5}

/* 1 — Draw border with clip-path */
.b-draw{border:2px solid transparent;transition:border-color .4s}
.b-draw::before,.b-draw::after{content:'';position:absolute;transition:width .3s ease,height .3s ease;background:#818cf8}
.b-draw::before{top:0;left:0;width:0;height:2px}
.b-draw::after{bottom:0;right:0;width:0;height:2px}
.b-draw .side-l,.b-draw .side-r{position:absolute;background:#818cf8}
.b-draw .side-l{top:0;left:0;width:2px;height:0;transition:height .3s .3s ease}
.b-draw .side-r{bottom:0;right:0;width:2px;height:0;transition:height .3s .3s ease}
.b-draw:hover::before,.b-draw:hover::after{width:100%}
.b-draw:hover .side-l,.b-draw:hover .side-r{height:100%}

/* 2 — Glow border pulse */
.b-glow{border:2px solid rgba(52,211,153,.2);background:rgba(52,211,153,.04);transition:border-color .3s,box-shadow .3s}
.b-glow:hover{border-color:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.1),0 0 20px rgba(52,211,153,.2)}

/* 3 — Gradient rotating border */
.b-rotate{border:2px solid transparent;background:linear-gradient(#0d0e14,#0d0e14) padding-box,linear-gradient(135deg,#f97316,#ec4899) border-box}
.b-rotate:hover{background:linear-gradient(#0d0e14,#0d0e14) padding-box,linear-gradient(315deg,#f97316,#ec4899,#a78bfa,#f97316) border-box;animation:trn07-spin 2s linear infinite}
@keyframes trn07-spin{to{background:linear-gradient(#0d0e14,#0d0e14) padding-box,linear-gradient(315deg,#ec4899,#a78bfa,#f97316,#ec4899) border-box}}

/* 4 — Shrink corner markers */
.b-corner{border:none;background:#0d0e14}
.b-corner::before,.b-corner::after{content:'';position:absolute;width:24px;height:24px;transition:width .3s,height .3s}
.b-corner::before{top:0;left:0;border-top:2px solid #a78bfa;border-left:2px solid #a78bfa}
.b-corner::after{bottom:0;right:0;border-bottom:2px solid #a78bfa;border-right:2px solid #a78bfa}
.b-corner:hover::before,.b-corner:hover::after{width:calc(100% - 2px);height:calc(100% - 2px)}

/* 5 — Border width pulse */
.b-pulse{border:1px solid rgba(245,158,11,.3);transition:border-width .2s,border-color .2s,box-shadow .2s}
.b-pulse:hover{border-width:3px;border-color:#f59e0b;box-shadow:inset 0 0 20px rgba(245,158,11,.08)}

/* 6 — Dotted to solid */
.b-style{border:2px dashed rgba(20,184,166,.4);transition:border-style .01s,border-color .3s,box-shadow .3s}
.b-style:hover{border-style:solid;border-color:#14b8a6;box-shadow:0 0 0 6px rgba(20,184,166,.08)}

/* 7 — Colour shift wipe */
.b-wipe{border:2px solid #334155;transition:border-color .4s}
.b-wipe:hover{border-color:#f43f5e}

/* 8 — Double border expand */
.b-double{border:2px solid rgba(99,102,241,.3);outline:2px solid transparent;outline-offset:0;transition:outline-color .3s,outline-offset .3s,border-color .3s}
.b-double:hover{border-color:#6366f1;outline-color:rgba(99,102,241,.2);outline-offset:6px}

/* Input fields with border transitions */
.inputs{display:flex;flex-direction:column;gap:16px;margin-bottom:48px}
.input-group{display:flex;flex-direction:column;gap:6px}
.input-group label{font-size:.78rem;font-weight:600;letter-spacing:.08em;color:#9ca3af}
.inp{background:#0d0e14;color:#e8eaf6;font-family:'Outfit';font-size:.95rem;padding:14px 16px;border-radius:8px;outline:none;width:100%}

.inp-1{border:2px solid #1e2030;transition:border-color .3s,box-shadow .3s}
.inp-1:focus{border-color:#818cf8;box-shadow:0 0 0 4px rgba(129,140,248,.15)}

.inp-2{border:1px solid #1e2030;border-bottom:2px solid #334155;border-radius:8px 8px 0 0;transition:border-bottom-color .3s}
.inp-2:focus{border-bottom-color:#34d399}

.inp-3{border:2px solid transparent;background-color:#0d0e14;background-image:linear-gradient(#0d0e14,#0d0e14),linear-gradient(135deg,#1e2030,#1e2030);background-clip:padding-box,border-box;background-origin:border-box;transition:background-image .4s}
.inp-3:focus{background-image:linear-gradient(#0d0e14,#0d0e14),linear-gradient(135deg,#f97316,#ec4899)}

.inputs-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
@media(max-width:640px){.inputs-row{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}

More from 22 CSS Transition Effects

Button Hover TransitionsFlip Card 3D TransitionText Reveal AnimationImage Zoom Hover TransitionBackground Color TransitionNavigation Hover TransitionUnderline Animation HoverGlassmorphism Hover TransitionSlide-In Animation on ScrollFade In Fade Out TransitionLoading Skeleton TransitionModal Open Close Transition
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →