15 CSS Border Examples
Collection of hand-picked free HTML and CSS border code examples.
- CSS Border Animations
Author
- Saeed Alipoor
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: -
Author
- Tobias Reich
Made with
- HTML / CSS (SCSS) / JavaScript (Babel)
About the code
Interactive Button Border
Button with an interactive border gradient.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Author
- Stefan Judis
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: -
Author
- Tony Phipps
About the code
Animated Border on Hover
Card with animated left border on hover.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Author
- Andy Bell
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: -
Author
- George W. Park
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: -
Author
- George W. Park
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: -
Author
- David Darnes
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: -
Author
- Tiffany Rayside
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: -
Author
- michael picker
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: -