_ez0fw
Last Updated: February 25, 2016
·
818
· 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:
http://codepen.io/murphyrandle/pen/bAjBi

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
Respond
Awesome Job

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