In this article, we are demonstrating a curated collection of the latest CSS border designs with free HTML and CSS code examples and demos. We have sourced these border designs from CodePen, GitHub, and other esteemed sites.
Borders are commonly used to separate elements on a webpage and create boxes or circles. With CSS, you have the flexibility to personalize border styles, widths, colors, and even animations to enrich the website’s overall design and layout, which makes your website visually attractive.
In this valuable collection, we’re offering a wide range of stunning border designs that you can use to frame essential elements, emphasize important content, or create visual distinctions between different sections. These designs offer an opportunity to enhance your website or webpage, making it more appealing to users.
Let’s begin a journey to explore trendy border design with real-world code examples.
01. Full Screen Vintage Frame with Multiple Borders
See the Pen
Full Screen Vintage Frame with Multiple Borders by Tudor-Cristian Sfătosu (@chris_tudor)
on CodePen.
Author: Tudor Sfătosu @chris_tudor
Links: Source Code / Demo
Created on: January 31, 2020
Made with: HTML, CSS
02. dashed border icon animations
See the Pen
dashed border icon animations by FlorinCornea (@FlorinCornea)
on CodePen.
Author: FlorinCornea @FlorinCornea
Links: Source Code / Demo
Created on: March 04, 2020
Made with: HTML, CSS
03. Rounded side border radius
See the Pen
rounded side border radius by Joe (@joeashworth)
on CodePen.
Author: Joe @joeashworth
Links: Source Code / Demo
Created on: January 17, 2019
Made with: HTML, CSS
04. Background border
See the Pen
Background border by daniesy (@daniesy)
on CodePen.
Author: Daniesy @daniesy
Links: Source Code / Demo
Created on: November 4, 2022
Made with: HTML, CSS, SCSS
05. Partial Gradient Border
See the Pen
Partial Gradient Border by Jeremy Frank (@jeremyfrank)
on CodePen.
Author: Jeremy Frank @jeremyfrank
Links: Source Code / Demo
Created on: November 14, 2022
Made with: HTML, CSS, JS
06. CSS Candy Stripe Border Using Clip-Path
See the Pen
CSS Candy Stripe Border Using Clip-Path by Brian Haferkamp (@brianhaferkamp)
on CodePen.
Author: Brian Haferkamp @brianhaferkamp
Links: Source Code / Demo
Created on: March 5, 2020
Made with: HTML(Pug), CSS (Sass)
07. Card with animated left border on hover
See the Pen
Card with animated left border on hover by Tony Phipps (@neutraltone)
on CodePen.
Author: Tony Phipps @neutraltone
Links: Source Code / Demo
Created on: January 18, 2019
Made with: HTML, CSS
08. Animated border on image
See the Pen
animated border on image, with Temani Afif tip by GrahamTheDev (@GrahamTheDev)
on CodePen.
Author: GrahamTheDev @GrahamTheDev
Links: Source Code / Demo
Created on: November 28, 2022
Made with: HTML, CSS
09. Gradient Border
See the Pen
Gradient Border by Michael Burridge (@mburridge)
on CodePen.
Author: Michael Burridge @mburridge
Links: Source Code / Demo
Created on: January 9, 2020
Made with: HTML, CSS
10. Gradient Border + Transparent Background
See the Pen
Gradient Border + Transparent Background by Fabian Michael (@fabianmichael)
on CodePen.
Author: Fabian Michael @fabianmichael
Links: Source Code / Demo
Created on: January 27, 2022
Made with: HTML, CSS
11. Gradient border with rounded corners
See the Pen
Gradient border with rounded corners by Adam Argyle (@argyleink)
on CodePen.
Author: Adam Argyle @argyleink
Links: Source Code / Demo
Created on: November 7, 2022
Made with: HTML, CSS
12. Multiple Border-Radius Values
See the Pen
Multiple Border-Radius Values by Jad Limcaco (@jadlimcaco)
on CodePen.
Author: Jad Limcaco @jadlimcaco
Links: Source Code / Demo
Created on: March 29, 2020
Made with: HTML, CSS
13. Offset and XOR frame: lively
See the Pen
Offset and XOR frame: lively by Ana Tudor (@thebabydino)
on CodePen.
Author: Ana Tudor @thebabydino
Links: Source Code / Demo
Created on: March 4, 2021
Made with: HTML, CSS, SCSS
14. Patterned borders
See the Pen
Patterned borders by Natalia ???? (@natszafraniec)
on CodePen.
Author: Natalia @natszafraniec
Links: Source Code / Demo
Created on: August 17, 2022
Made with: HTML, CSS, SCSS
15. border-image
See the Pen
SVG Tip Of The Day #21 – Use SVG for border-image by Louis Hoebregts (@Mamboleoo)
on CodePen.
Author: Louis Hoebregts @Mamboleoo
Links: Source Code / Demo
Created on: August 25, 2020
Made with: HTML, CSS, SCSS
16. Border linear-gradient + border-radius
See the Pen
Border linear-gradient + border-radius by Chicagez (@chicagez)
on CodePen.
Author: Chicagez @chicagez
Links: Source Code / Demo
Created on: January 11, 2022
Made with: HTML, CSS
17. CSS Quote Box Hover Effects
See the Pen
CSS Quote Box Hover Effects by abdel Rhman (@abdelRhman345)
on CodePen.
Author: Abdel Rhman @abdelRhman345
Links: Source Code / Demo
Created on: January 16, 2019
Made with: HTML(Pug), CSS (SCSS)
18. Sketchy border test
See the Pen
Sketchy border test by Andy Bell (@andy-set-studio)
on CodePen.
Author: Andy Bell @andy-set-studio
Links: Source Code / Demo
Created on: October 27, 2018
Made with: HTML, CSS, SCSS
19. Gradient Border Effect
See the Pen
Gradient Border Effect (From Metafy) by Hyperplexed (@Hyperplexed)
on CodePen.
Author: Hyperplexed
Links: Source Code / Demo
Created on: March 30, 2022
Made with: HTML, CSS
20. 8-bit borders using shadows
See the Pen
8-bit borders using shadows by Alberto Para (@albpara)
on CodePen.
Author: Alberto Para @albpara
Links: Source Code / Demo
Created on: May 5, 2014
Made with: HTML, CSS, SCSS
21. Borders & Gradients
See the Pen
Borders & Gradients by Ivan Bogachev (@sfi0zy)
on CodePen.
Author: Ivan Bogachev @sfi0zy
Links: Source Code / Demo
Created on: April 01, 2020
Made with: HTML, CSS(Less)
22. CSS Gradient Clip-Path Borders
See the Pen
CSS Gradient Clip-Path Borders by George W. Park (@GeorgePark)
on CodePen.
Author: George W. Park @GeorgePark
Links: Source Code / Demo
Created on: May 7, 2018
Made with: HTML, CSS
23. Corner-only border
See the Pen
Corner-only border (allows for corner rounding & gradient border) by Ana Tudor (@thebabydino)
on CodePen.
Author: Ana Tudor @thebabydino
Links: Source Code / Demo
Created on: November 4, 2021
Made with: HTML, CSS, SCSS
24. Fancy Border Box
See the Pen
Fancy Border Box by Max (@MyXoToD)
on CodePen.
Author: Max @MyXoToD
Links: Source Code / Demo
Created on: March 9, 2016
Made with: HTML(Haml) , CSS
25. Colorful Border
See the Pen
Colorful Border by Thea (@HighFlyer)
on CodePen.
Author: Thea @HighFlyer
Links: Source Code / Demo
Created on: July 01, 2022
Made with: HTML, CSS
26. CSS Gradient Rounded Borders
See the Pen
CSS Gradient Rounded Borders by George W. Park (@GeorgePark)
on CodePen.
Author: George W. Park @GeorgePark
Links: Source Code / Demo
Created on: April 9, 2018
Made with: HTML, CSS
27. 8-bit pixel border
See the Pen
8-bit pixel border by Rob DiMarzo (@robdimarzo)
on CodePen.
Author: Rob DiMarzo @robdimarzo
Links: Source Code / Demo
Created on: July 01, 2021
Made with: HTML, CSS, SCSS
28. Magic borders
See the Pen
Magic borders by Saeed Alipoor (@saeedalipoor)
on CodePen.
Author: Saeed Alipoor @saeedalipoor
Links: Source Code / Demo
Created on: February 2, 2019
Made with: HTML, CSS, SCSS
29. Hand Drawn Border Effects
See the Pen
Hand Drawn Border Effects by Tiffany Rayside (@tmrDevelops)
on CodePen.
Author: Tiffany Rayside @tmrDevelops
Links: Source Code / Demo
Created on: February 12, 2015
Made with: HTML, CSS
30. Custom dashed border
See the Pen
Custom dashed border by Temani Afif (@t_afif)
on CodePen.
Author: Temani Afif @t_afif
Links: Source Code / Demo
Created on: August 10, 2022
Made with: HTML, CSS
31. CSS gradient borders
See the Pen
CSS gradient borders by Ananya Neogi (@ananyaneogi)
on CodePen.
Author: Ananya Neogi @ananyaneogi
Links: Source Code / Demo
Created on: August 3, 2020
Made with: HTML, CSS, SCSS
32. 8bit border-image
See the Pen
8bit border-image by Nils Binder (@enbee81)
on CodePen.
Author: Nils Binder @enbee81
Links: Source Code / Demo
Created on: July 5, 2021
Made with: HTML, CSS, SCSS
33. Reddit border inset challenge
See the Pen
Reddit border inset challenge by David Darnes (@daviddarnes)
on CodePen.
Author: David Darnes @daviddarnes
Links: Source Code / Demo
Created on: February 19, 2018
Made with: HTML, CSS, SCSS
34. Gradient border without pseudo elements
See the Pen
Gradient border without pseudo elements by Stefan Judis (@stefanjudis)
on CodePen.
Author: Stefan Judis @stefanjudis
Links: Source Code / Demo
Created on: January 18, 2019
Made with: HTML, CSS, SCSS
35. Jagged border – top
See the Pen
Jagged border – top by HollowMan (@HollowMan)
on CodePen.
Author: HollowMan @HollowMan
Links: Source Code / Demo
Created on: July 29, 2014
Made with: HTML, CSS(Less)
36. Blurred border
See the Pen
Blurred border by Ana Tudor (@thebabydino)
on CodePen.
Author: Ana Tudor @thebabydino
Links: Source Code / Demo
Created on: March 15, 2019
Made with: HTML, CSS, SCSS
37. Comic Style Border
See the Pen
“comic style” border by michael picker (@mp)
on CodePen.
Author: Michael picker @mp
Links: Source Code / Demo
Created on: January 20, 2014
Made with: HTML, CSS
38. Fitted Border Image the Easy Way
See the Pen
Fitted Border Image the Easy Way by ShopTalk Show (@shoptalkshow)
on CodePen.
Author: ShopTalk Show @shoptalkshow
Links: Source Code / Demo
Created on: December 13, 2019
Made with: HTML, CSS, SCSS
39. Colorful Black Hole
See the Pen
Colorful Black Hole by Aniket Kudale (@aniketkudale)
on CodePen.
Author: Aniket Kudale @aniketkudale
Links: Source Code / Demo
Created on: February 28, 2020
Made with: HTML, CSS
40. Interactive button border
See the Pen
Interactive button border by Tobias Reich (@electerious)
on CodePen.
Author: Tobias Reich @electerious
Links: Source Code / Demo
Created on: January 31, 2019
Made with: HTML, CSS(SCSS), JavaScript (Babel)
41. Border-radius weave
See the Pen
Border-radius weave by phil (@uniphil)
on CodePen.
Author: phil @Uniphil
Links: Source Code / Demo
Created on: November 6, 2013
Made with: HTML, CSS(Sass)
42. Pure CSS circular border patterns
See the Pen
Pure CSS circular border patterns (1 element, no images) by Ana Tudor (@thebabydino)
on CodePen.
Author: Ana Tudor @thebabydino
Links: Source Code / Demo
Created on: December 27, 2019
Made with: HTML(Pug), CSS, SCSS
43. SVG as border-image for arbitrary corner shapes with shadow
See the Pen
SVG as border-image for arbitrary corner shapes with shadow by Ilya Streltsyn (@SelenIT)
on CodePen.
Author: ilya Streltsyn @SelenIT
Links: Source Code / Demo
Created on: February 28, 2020
Made with: HTML, CSS, SCSS
44. Pure CSS3 Animated Border
Author: Karim Khan code-fx
Links: Source Code / Demo
Created on: November 12, 2017
Made with: HTML, CSS
45. Avatar border effect
See the Pen
Avatar border effect – 15 declarations, 1 element, no pseudos! by Ana Tudor (@thebabydino)
on CodePen.
Author: Ana Tudor @thebabydino
Links: Source Code / Demo
Created on: April 15, 2021
Made with: HTML, CSS, SCSS
46. Border-gradient mixin
See the Pen
Border-gradient mixin by John Grishin (@exah)
on CodePen.
Author: John Grishin @exah
Links: Source Code / Demo
Created on: April 24, 2014
Made with: HTML, CSS, SCSS
47. Bounce On Hover
See the Pen
Bounce On Hover by Marcello Africano (@mnafricano)
on CodePen.
Author: Marcello Africano @mnafricano
Links: Source Code / Demo
Created on: February 24, 2013
Made with: HTML, CSS, SCSS
