15 CSS Border Examples

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

Related Articles

  1. CSS Border Animations

Author

  • Saeed Alipoor

Links

  • demo and code

Made with

  • HTML / CSS (SCSS)

About the code

Magic Borders

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: –

Author

  • Tobias Reich

Links

  • demo and code

Made with

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

About the code

Interactive Button Border

Button with an interactive border gradient.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: –


Author

  • Stefan Judis

Links

  • demo and code

Made with

  • HTML / CSS (SCSS)

About the code

Gradient Border

HTML and CSS gradient border without pseudo elements.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: –

Author

  • Joe

Links

  • demo and code

Made with

  • HTML / CSS

About the code

Rounded Side

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: –

Author

  • Tony Phipps

Links

  • demo and code

Made with

  • HTML / CSS

About the code

Animated Border on Hover

Card with animated left border on hover.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: –


Author

  • Andy Bell

Links

  • demo and code

Made with

  • HTML / CSS (SCSS)

About the code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: –


Author

  • George W. Park

Links

  • demo and code

Made with

  • HTML / CSS

About the code

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.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: –


Author

  • George W. Park

Links

  • demo and code

Made with

  • HTML / CSS

About the code

CSS Gradient Rounded Borders

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: –


Author

  • David Darnes

Links

  • demo and code

Made with

  • HTML / CSS (SCSS)

About the code

Border Inset

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: –


Author

  • Max

Links

  • demo and code

Made with

  • HTML (Haml) / CSS (SCSS)

About the code

Fancy Border Box

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: –


Author

  • Tiffany Rayside

Links

  • demo and code

Made with

  • HTML / CSS

About the code

Hand Drawn Border Effects

A one line border-radius technique.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: –


Author

  • HollowMan

Links

  • demo and code

Made with

  • HTML / CSS (Less)

About the code

Jagged Border

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: –


Author

  • Alberto Para

Links

  • demo and code

Made with

  • HTML / CSS (SCSS)

About the code

8-bit Borders Using Shadows

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: –


Author

  • michael picker

Links

  • demo and code

Made with

  • HTML / CSS

About the code

Comic Style Border

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: –


Author

  • uniphil

Links

  • demo and code

Made with

  • HTML / CSS (Sass)

About the code

Border-Radius Weave

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: –