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

Animated Border Image

Partial Gradient Border

Partial gradient border surrounding a circle image, which is done with a CSS conic gradient and a radial gradient mask.

Gradient Border with Rounded Corners

Background Border

Patterned Borders

Custom Dashed Border

Colorful Border

Gradient Border Effect

Gradient Border + Transparent Background

Border Linear-Gradient + Border-Radius

Corner-only Border

Corner-only border (allows for corner rounding & gradient border).

8bit border-image

8-bit Pixel Border

Avatar Border Effect. 15 Declarations, 1 Element, No Pseudos

Use SVG for border-image

CSS Gradient Borders

Borders & Gradients

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.

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.

Offset and XOR Frame: Lively

Full Screen Vintage Frame with Multiple Borders

Gradient Border

Pure CSS Circular Border Patterns

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

Fitted Border Image the Easy Way

Map-Inspired Border

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