Collection of hand-picked free HTML and CSS border code examples. Update of February 2020 collection. 9 new items.

Related Articles

  1. CSS Border Animations

Author

  • Louis Hoebregts

Made with

  • HTML / CSS (SCSS)

About a code

Use SVG for border-image

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

Responsive: yes

Dependencies: -

Demo image: CSS Gradient Borders

Author

  • Ananya Neogi

Made with

  • HTML / CSS (SCSS)

About a code

CSS Gradient Borders

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

Responsive: yes

Dependencies: -

Demo image: Borders & Gradients

Author

  • Ivan Bogachev

Made with

  • HTML / CSS (Less)

About a code

Borders & Gradients

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

Responsive: no

Dependencies: -

Demo image: Multiple Border-Radius Values

Author

  • Jad Limcaco

Made with

  • HTML / CSS

About a code

Multiple Border-Radius Values

You probably knew that you can set the border-radius of an element to 4 values, and using shorthand, it goes clock-wise from top, right, bottom, left. But did you know you can actually set up to 8 values if you separate them? Each corner can have 2 values as you can see in this example.

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

Responsive: yes

Dependencies: -

Demo image: CSS Candy Stripe Border Using Clip-Path

Author

  • Brian Haferkamp

Made with

  • HTML (Pug) / CSS (Sass)

About a code

CSS Candy Stripe Border Using Clip-Path

Create a responsive candy stripe border using the clip-path property on each of the list items in a ul. Change the height, background color, and stripe color very easily.

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

Responsive: yes

Dependencies: -

Demo image: Offset and XOR Frame: Lively

Author

  • Ana Tudor

Made with

  • HTML / CSS (SCSS)

About a code

Offset and XOR Frame: Lively

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

Responsive: yes

Dependencies: -

Demo image: Full Screen Vintage Frame with Multiple Borders

Author

  • Tudor Sf─âtosu

Made with

  • HTML / CSS

About a code

Full Screen Vintage Frame with Multiple Borders

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

Responsive: yes

Dependencies: bootstrap.css

Demo image: Pure CSS Circular Border Patterns

Author

  • Ana Tudor

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Pure CSS Circular Border Patterns

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

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • ShopTalk Show

Made with

  • HTML / CSS (SCSS)

About a code

Fitted Border Image the Easy Way

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Map-Inspired Border

Author

  • Stephy

Made with

  • HTML / CSS (SCSS)

About a code

Map-Inspired Border

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

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

Responsive: yes

Dependencies: -

Demo image: Blurred Border

Author

  • Ana Tudor

Made with

  • HTML / CSS (SCSS)

About a code

Blurred Border

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

Responsive: yes

Dependencies: -

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

Author

  • abdel Rhman

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

CSS Quote Box Hover Effects

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

Responsive: yes

Dependencies: font-awesome.css

Demo image: SVG as Border-Image for Arbitrary Corner Shapes with Shadow

Author

  • Ilya Streltsyn

Made with

  • HTML / CSS (SCSS)

About a code

SVG as Border-Image for Arbitrary Corner Shapes with Shadow

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

Responsive: no

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