We are excited to present our latest update, featuring a curated collection of free HTML and CSS border code examples. This compilation showcases a diverse range of border designs that will instantly elevate the visual appeal and aesthetics of your projects.

With our January 2023 update, we have scoured reputable sources such as CodePen, GitHub, and other reliable platforms to bring you an extensive selection of border styles. Whether you're aiming for a sleek and modern look or a vintage and ornate feel, our collection has it all.

Our hand-picked border examples are designed to add depth and structure to your website or application. Borders can be used to frame content, create visual separation, or simply add a decorative element to your design.

With our latest update, featuring 15 new items, you'll have an unparalleled selection to choose from. Happy coding!

Related Articles

  1. CSS Border Animations

Author

  • GrahamTheDev

Made with

  • HTML / CSS

About a code

Animated Border Image

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

Responsive: no

Dependencies: -

Demo image: Partial Gradient Border

Author

  • Jeremy Frank

Made with

  • HTML / CSS

About a code

Partial Gradient Border

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

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

Responsive: no

Dependencies: -

Demo image: Gradient Border with Rounded Corners

Author

  • Adam Argyle

Made with

  • HTML / CSS

About a code

Gradient Border with Rounded Corners

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

Responsive: no

Dependencies: -

Demo image: Background Border

Author

  • daniesy

Made with

  • HTML / CSS (SCSS)

About a code

Background Border

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

Responsive: yes

Dependencies: -

Demo image: Patterned Borders

Author

  • Natalia

Made with

  • HTML / CSS (SCSS)

About a code

Patterned Borders

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

Responsive: yes

Dependencies: -

Demo image: Custom Dashed Border

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

Custom Dashed Border

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

Responsive: no

Dependencies: -

Demo image: Colorful Border

Author

  • Thea

Made with

  • HTML / CSS

About a code

Colorful Border

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

Responsive: no

Dependencies: -

Author

  • Hyperplexed

Made with

  • HTML / CSS

About a code

Gradient Border Effect

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

Responsive: yes

Dependencies: -

Demo image: Gradient Border + Transparent Background

Author

  • Fabian Michael

Made with

  • HTML / CSS

About a code

Gradient Border + Transparent Background

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

Responsive: no

Dependencies: -

Demo image: Border Linear-Gradient + Border-Radius

Author

  • Chicagez

Made with

  • HTML / CSS

About a code

Border Linear-Gradient + Border-Radius

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

Responsive: no

Dependencies: -

Demo image: Corner-only Border

Author

  • Ana Tudor

Made with

  • HTML / CSS (SCSS)

About a code

Corner-only Border

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

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

Responsive: yes

Dependencies: -

Demo image: 8bit border-image

Author

  • Nils Binder

Made with

  • HTML / CSS (SCSS)

About a code

8bit border-image

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

Responsive: yes

Dependencies: -

Demo image: 8-bit Pixel Border

Author

  • Rob DiMarzo

Made with

  • HTML / CSS (SCSS)

About a code

8-bit Pixel Border

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

Responsive: yes

Dependencies: -

Demo image: Avatar Border Effect. 15 Declarations, 1 Element, No Pseudos

Author

  • Ana Tudor

Made with

  • HTML / CSS (SCSS)

About a code

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

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

Responsive: yes

Dependencies: -

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

Author

  • Michael Burridge

Made with

  • HTML / CSS

About a code

Gradient Border

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

Responsive: yes

Dependencies: -

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