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

1
2
Html
Css/SCSS

Author

1
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

1
HTML / CSS (SCSS)

Author

1
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

1
HTML / CSS (SCSS)

Author

1
Stephy

Demo

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


4.BLURRED BORDER

Made with

1
2
Html
Css/SCSS

Author

1
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

1
2
Html
Css/SCSS

Author

1
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

1
HTML / CSS (SCSS) / JavaScript (Babel)

Author

1
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

1
HTML / CSS (SCSS)

Author

1
Stefan Judis

Demo

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


8.ROUNDED SIDE

Made with

1
HTML / CSS

Author

1
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

1
HTML / CSS

Author

1
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

1
HTML / CSS (SCSS)

Author

1
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

1
HTML / CSS

Author

1
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

1
HTML / CSS (SCSS)

Author

1
David Darnes

Demo

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


13.FANCY BORDER BOX

Made with

1
HTML (Haml) / CSS (SCSS)

Author

1
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

1
HTML / CSS

Author

1
Tiffany Rayside

Demo

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


15.JAGGED BORDER

Made with

1
HTML / CSS (Less)

Author

1
HollowMan

Demo

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


16.BORDER-RADIUS WEAVE

Made with

1
HTML / CSS (Sass)

Author

1
uniphil

Demo

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