Grow your CSS skills. Land your dream job.

Gradient border, CSS only

  • # November 8, 2012 at 10:58 am

    Hi!

    I’ve made a CSS pseudo gradient border.
    You can see the code here :

    http://jsfiddle.net/Zwhq8/1/

    It works on FF, Chrome, Safari, Opera, IE8-9.
    It’s not perfect. For example, if you want a border radius, you will have to add it on the 3 divs.

    What do you think about this solution? Do you see some ways to improve it?

    # November 8, 2012 at 11:04 am

    I’m against it in general. Oh, it looks nice but I hate having to add extraneous divs for styling purposes.

    Other than that, I think you have an extra div in there that isn’t necessary.

    http://codepen.io/anon/pen/ywohH

    # November 8, 2012 at 11:58 am

    Ah! I wonder why I was using a border then… Thanks for your solution.

    # November 8, 2012 at 1:31 pm

    Couple of good articles on gradient border techniques on css tricks
    [http://css-tricks.com/examples/GradientBorder/](http://css-tricks.com/examples/GradientBorder/ “http://css-tricks.com/examples/GradientBorder/”)

    [http://css-tricks.com/video-screencasts/95-a-tale-of-border-gradients/](http://css-tricks.com/video-screencasts/95-a-tale-of-border-gradients/ “http://css-tricks.com/video-screencasts/95-a-tale-of-border-gradients/”)

    if you want some further reading

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".