10 CSS Border Examples - csshint

Latest Collection of hand-picked free HTML and CSS border code examples.

1.Interactive button border

See the Pen <a href='https://codepen.io/electerious/pen/GzrmwB/'>Interactive button border</a> by Tobias Reich (<a href='https://codepen.io/electerious'>@electerious</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Tobias Reich

Made with

HTML / CSS (SCSS) / JavaScript (Babel)

demo and code Get Hosting

2.Magic borders

See the Pen <a href='https://codepen.io/saeedalipoor/pen/XORedo/'>Magic borders</a> by Saeed Alipoor (<a href='https://codepen.io/saeedalipoor'>@saeedalipoor</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Saeed Alipoor

Made with

HTML / CSS (SCSS)

demo and code Get Hosting

3.Sketchy border test

See the Pen <a href='https://codepen.io/andybelldesign/pen/MPLzay/'>Sketchy border test</a> by Andy Bell (<a href='https://codepen.io/andybelldesign'>@andybelldesign</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Andy Bell

Made with

HTML / CSS (SCSS)

demo and code Get Hosting

4.CSS Gradient Clip-Path Borders

Author

George W. Park

Made with

HTML / CSS

demo and code Get Hosting

5.Fancy Border Box

See the Pen <a href='https://codepen.io/MyXoToD/pen/VaazQq/'>Fancy Border Box</a> by Max (<a href='https://codepen.io/MyXoToD'>@MyXoToD</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Made with

HTML (Haml) / CSS (SCSS)

demo and code Get Hosting

6.“comic style” border

See the Pen <a href='https://codepen.io/mp/pen/ldAFs/'>"comic style" border</a> by michael picker (<a href='https://codepen.io/mp'>@mp</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

michael picker

Made with

HTML / CSS

demo and code Get Hosting

7.Border-radius weave

See the Pen <a href='https://codepen.io/uniphil/pen/BwHti/'>Border-radius weave</a> by uniphil (<a href='https://codepen.io/uniphil'>@uniphil</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

uniphil

Made with

HTML / CSS (Sass)

demo and code Get Hosting

8.Jagged border – top

See the Pen <a href='https://codepen.io/HollowMan/pen/uwstc/'>Jagged border – top </a> by HollowMan (<a href='https://codepen.io/HollowMan'>@HollowMan</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

HollowMan

Made with

HTML / CSS (Less)

demo and code Get Hosting

9.Reddit border inset challenge

See the Pen <a href='https://codepen.io/daviddarnes/pen/oEEqdp/'>Reddit border inset challenge</a> by David Darnes (<a href='https://codepen.io/daviddarnes'>@daviddarnes</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

David Darnes

Made with

HTML / CSS (SCSS)

demo and code Get Hosting

10.rounded side border radius

See the Pen <a href='https://codepen.io/joeashworth/pen/PXvRzb/'>rounded side border radius</a> by Joe (<a href='https://codepen.io/joeashworth'>@joeashworth</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Made with

HTML / CSS

demo and code Get Hosting

1.Interactive button border

Author

Made with

2.Magic borders

Author

Made with

3.Sketchy border test

Author

Made with

4.CSS Gradient Clip-Path Borders

Author

Made with

5.Fancy Border Box

Author

Made with

6.“comic style” border

Author

Made with

7.Border-radius weave

Author

Made with

8.Jagged border – top

Author

Made with

9.Reddit border inset challenge

Author

Made with

10.rounded side border radius

Author

Made with

You may also like