Treehouse: Grow your CSS skills. Land your dream job.

Gradient border, CSS only

  • # November 8, 2012 at 10:58 am


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

    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.

    # 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
    []( “”)

    []( “”)

    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.