Pure CSS Borders
CSS border effects include gradient borders, animated outlines, dashed and glowing frames, created with border, outline, box-shadow and pseudo-elements.
10 free examples, most liked first. Click one to preview it and copy the code.
Gradient Frame Glow Border
by @admin · Border
Border Trace Button
by @admin · Border
Corner Bracket Frame
by @admin · Border
Spinning Gradient Border
by @admin · Border
Dashed Marching Border
by @admin · Border
Double Outline Focus Card
by @admin · Border
Offset Double Line Border
by @admin · Border
Corner Slide Border Card
by @admin · Border
Dotted Rotating Border
by @admin · Border
Ticket Stub Perforation
by @admin · Border
Borders FAQ
How do I make a gradient border in CSS?
Use a background gradient with border-box clipping or a mask on a pseudo-element, since the border property itself does not accept gradients. The examples here show working techniques.
How do I use these pure CSS borders?
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.