28 CSS Border Examples

About a code

Use SVG for border-image

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

Responsive: yes

Dependencies: -

About a code

CSS Gradient Borders

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

Responsive: yes

Dependencies: -

About a code

Borders & Gradients

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

Responsive: no

Dependencies: -

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

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

About a code

Offset and XOR Frame: Lively

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

Responsive: yes

Dependencies: -

About a code

Full Screen Vintage Frame with Multiple Borders

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

Responsive: yes

Dependencies: bootstrap.css

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

About a code

Fitted Border Image the Easy Way

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

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

About a code

Blurred Border

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

Responsive: yes

Dependencies: -

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

About the code

Interactive Button Border

Button with an interactive border gradient.

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

Dependencies: -

About the code

Gradient Border

HTML and CSS gradient border without pseudo elements.

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

Dependencies: -

About the code

Rounded Side

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

Dependencies: -

About the code

Animated Border on Hover

Card with animated left border on hover.

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

Dependencies: -

About a code

CSS Quote Box Hover Effects

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

Responsive: yes

Dependencies: font-awesome.css

About a code

SVG as Border-Image for Arbitrary Corner Shapes with Shadow

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

Responsive: no

Dependencies: -

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

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

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

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

About the code

Fancy Border Box

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

Dependencies: -

About the code

Hand Drawn Border Effects

A one line border-radius technique.

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

Dependencies: -

About the code

Jagged Border

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

Dependencies: -

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

About the code

Comic Style Border

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

Dependencies: -

About the code

Border-Radius Weave

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

Dependencies: -