Last Updated: February 25, 2016
· murphyrandle
621103 10151814410385600 1552271139 o

Fake CSS3 gradient borders

Turns out you can fake some nice gradient borders with the :before and :after CSS3 pseudo tags!

Here's an example:

Tricks to remember:

  • The div to receive the borders should have some position attribute other than the default. I like position: relative because it doesn't modify the default CSS placing of the element, but it allows sub-elements to be positioned relative to itself.
  • The pseudo-elements should use position: absolute and that absolute positioning will be absolute relative to the div you are trying to make the borders for.
  • Have a lot of fun while you're doing it.
Say Thanks
Awesome Job

A3e45f3a cade 11e7 83bc 71c9546a2749
Systems Engineer
Fulton, Maryland or Remote
Full Time