Post thumbnail: 15 CSS Border Examples

15 CSS Border Examples

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

Related Articles

  1. CSS Border Animations

Author

  • Saeed Alipoor

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

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: -

Demo image: Gradient Border

Author

  • Stefan Judis

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

Made with

  • HTML / CSS

About the code

Rounded Side

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

Dependencies: -

Author

  • Tony Phipps

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: -

Demo image: Sketchy Border

Author

  • Andy Bell

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: -

Demo image: CSS Gradient Clip-Path Borders

Author

  • George W. Park

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: -

Demo image: CSS Gradient Rounded Borders

Author

  • George W. Park

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: -

Demo image: Border Inset

Author

  • David Darnes

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: -

Demo image: Fancy Border Box

Author

  • Max

Made with

  • HTML (Haml) / CSS (SCSS)

About the code

Fancy Border Box

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

Dependencies: -

Demo image: Hand Drawn Border Effects

Author

  • Tiffany Rayside

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: -

Demo image: Jagged Border

Author

  • HollowMan

Made with

  • HTML / CSS (Less)

About the code

Jagged Border

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

Dependencies: -

Demo image: 8-bit Borders Using Shadows

Author

  • Alberto Para

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: -

Demo image: Comic Style Border

Author

  • michael picker

Made with

  • HTML / CSS

About the code

Comic Style Border

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

Dependencies: -

Demo image: Border-Radius Weave

Author

  • uniphil

Made with

  • HTML / CSS (Sass)

About the code

Border-Radius Weave

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

Dependencies: -

back to top