45+ CSS Border Design Examples

Last Updated on by in CSS Examples
CSS Border

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

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