30+ Easy CSS Border Examples (Free Downloads)

This pen shows how CSS gradients can be applied to a rounded border.

The "Hello, Gorgeous!" is something I saw in neon at the Scandic Grand Central hotel in Stockholm a little over a year ago. I can't afford staying at that sort of place, but I happened to see a photo of the sign as I was mindlessly going from link to link after the Helloween show at Fry...

Read More

Button with an interactive border gradient. More: https://www.stefanjudis.com/today-i-learned/background-clip-is-configurable-for-every-background-gradient-separately/

Try to have a dynamic and responsive table that has borders only between cells.

I discovered this style on theory11.com

A one line border-radius technique.

8-bit borders using multiple css3 shadows and a little of sass. Check out the amazing 8-bit sahdow effect bases on this technique: http://codepen.io/albpara/pen/fmyen To be improved!

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.

This pen shows how the CSS clip-path property can be used to create a variety of shaped gradient borders.

Links with corner borders and transition

When you hove the image, the border bounces.

Just playing around with size transitions on weird border-styles. Only looked at it in Chrome.

border-animation-css is create only in use of css.

It's not really possible (as far as I know) to make a border around an element with a clip path. This method uses an inside and outside element, the background of the outside one being the border.