The CSS border properties allow you to specify the style, width, and color of an element’s border.

So in this post we`ve collected some examples of various CSS border styles and animations for inspiration.

1.PURE CSS CIRCULAR BORDER PATTERNS

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

Made with

Html
Css/SCSS

Author

Ana Tudor

Demo

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

2.FITTED BORDER IMAGE THE EASY WAY

Made with

HTML / CSS (SCSS)

Author

ShopTalk Show

Demo

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

3.MAP-INSPIRED BORDER

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

Made with

HTML / CSS (SCSS)

Author

Stephy

Demo

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

4.BLURRED BORDER

Made with

Html
Css/SCSS

Author

Ana Tudor

Demo

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

5.MAGIC BORDERS

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

Made with

Html
Css/SCSS

Author

Saeed Alipoor

Demo

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

6.INTERACTIVE BUTTON BORDER

Button with an interactive border gradient.

Made with

HTML / CSS (SCSS) / JavaScript (Babel)

Author

Tobias Reich

Demo

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

7.GRADIENT BORDER

HTML and CSS gradient border without pseudo elements.

Made with

HTML / CSS (SCSS)

Author

Stefan Judis

Demo

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

8.ROUNDED SIDE

Made with

HTML / CSS

Author

Joe

Demo

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

9.ANIMATED BORDER ON HOVER

Card with animated left border on hover.

Made with

HTML / CSS

Author

Tony Phipps

Demo

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

10.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.

Made with

HTML / CSS (SCSS)

Author

Andy Bell

Demo

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

11.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.

Made with

HTML / CSS

Author

George W. Park

Demo

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

12.BORDER INSET

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

Made with

HTML / CSS (SCSS)

Author

David Darnes

Demo

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

13.FANCY BORDER BOX

Made with

HTML (Haml) / CSS (SCSS)

Author

Max

Demo

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

14.HAND DRAWN BORDER EFFECTS

A one line border-radius technique.

Made with

HTML / CSS

Author

Tiffany Rayside

Demo

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

15.JAGGED BORDER

Made with

HTML / CSS (Less)

Author

HollowMan

Demo

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

16.BORDER-RADIUS WEAVE

Made with

HTML / CSS (Sass)

Author

uniphil

Demo

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