Collection of hand-picked free HTML and CSS border code examples. Update of February 2020 collection. 9 new items.
Related Articles
Links
Made with
- HTML / CSS (SCSS)
About a code
Use SVG for border-image
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About a code
CSS Gradient Borders
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS (Less)
About a code
Borders & Gradients
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

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

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

Links
Made with
- HTML / CSS (SCSS)
About a code
Offset and XOR Frame: Lively
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
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

Links
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: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Fitted Border Image the Easy Way
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

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

Links
Made with
- HTML / CSS (SCSS)
About a code
Blurred Border
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
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: -
Links
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: -

Links
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: -
Links
Made with
- HTML / CSS
About the code
Rounded Side
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Links
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: -
Links
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

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

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

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

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

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

Links
Made with
- HTML (Haml) / CSS (SCSS)
About the code
Fancy Border Box
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -

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

Links
Made with
- HTML / CSS (Less)
About the code
Jagged Border
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -

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

Links
Made with
- HTML / CSS
About the code
Comic Style Border
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -

Links
Made with
- HTML / CSS (Sass)
About the code
Border-Radius Weave
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -