TOP 19 CSS Border Examples

PURE CSS CIRCULAR BORDER PATTERNS

The border patterns are created with clip-path on a pseudo-element.

See the Pen Pure CSS circular border patterns (1 element, no images) by Ana Tudor (@thebabydino) on CodePen.light

FITTED BORDER IMAGE THE EASY WAY

See the Pen Fitted Border Image the Easy Way by ShopTalk Show (@shoptalkshow) on CodePen.light

MAP-INSPIRED BORDER

Map-inspired border effect using stacked border & box-shadows. Single HTML element with CSS.

See the Pen Map-inspired border (single element + CSS) by Stephy (@blindingstars) on CodePen.light

BLURRED BORDER

See the Pen Blurred border by Ana Tudor (@thebabydino) on CodePen.light

MAGIC BORDERS

Try to have a dynamic and responsive table that has borders only between cells.

See the Pen Magic borders by Saeed Alipoor (@saeedalipoor) on CodePen.light

INTERACTIVE BUTTON BORDER

Button with an interactive border gradient.

See the Pen Interactive button border by Tobias Reich (@electerious) on CodePen.light

GRADIENT BORDER

HTML and CSS gradient border without pseudo elements.

See the Pen Gradient border without pseudo elements by Stefan Judis (@stefanjudis) on CodePen.light

ROUNDED SIDE

See the Pen rounded side border radius by Joe (@joeashworth) on CodePen.light

ANIMATED BORDER ON HOVER

Card with animated left border on hover.

See the Pen Card with animated left border on hover by Tony Phipps (@neutraltone) on CodePen.light

SKETCHY BORDER

Using 8 border-radius values can be pretty dope. This example shows how using it on the element and its ::before pseudo element can create a sketchy look and feel.

See the Pen Sketchy border test by Andy Bell (@andybelldesign) on CodePen.light

CSS GRADIENT CLIP-PATH BORDERS

This example shows how the CSS clip-path property can be used to create a variety of shaped gradient borders.

See the Pen CSS Gradient Clip-Path Borders by George W. Park (@GeorgePark) on CodePen.light

CSS GRADIENT ROUNDED BORDERS

This example shows how CSS gradients can be applied to a rounded border.

See the Pen CSS Gradient Rounded Borders by George W. Park (@GeorgePark) on CodePen.light

BORDER INSET

Trying to achieve an inset border effect around a block of text.

See the Pen Reddit border inset challenge by David Darnes (@daviddarnes) on CodePen.light

FANCY BORDER BOX

See the Pen Fancy Border Box by Max (@MyXoToD) on CodePen.light

HAND DRAWN BORDER EFFECTS

A one line border-radius technique.

See the Pen Hand Drawn Border Effects by Tiffany Rayside (@tmrDevelops) on CodePen.light

JAGGED BORDER

See the Pen Jagged border – top by HollowMan (@HollowMan) on CodePen.light

8-BIT BORDERS USING SHADOWS

8-bit borders using multiple CSS3 shadows and a little of Sass.

See the Pen 8-bit borders using shadows by Alberto Para (@albpara) on CodePen.light

COMIC STYLE BORDER

See the Pen "comic style" border by michael picker (@mp) on CodePen.light

BORDER-RADIUS WEAVE

See the Pen Border-radius weave by uniphil (@uniphil) on CodePen.light