The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

[Solved] css border sketched effect

  • # June 22, 2013 at 6:36 pm

    Hey sorry in advance i’m an ametuer at this, but here goes.

    I need a border that has a sketched look so instead of having pretty meeting corners, the lines need to go past so it looks like its just been sketched up.

    is this possible using css?

    thanks for your time

    # June 23, 2013 at 3:45 am

    Do you have an image of what you are trying to achieve?

    The ‘going past’ is, I suspect going to be the real issue. All normal CSS borders meet at 45 degrees and don’t cross.

    There is an option which might serve but it involves an image and is not supported by IE called `border-image`.

    Its not hard (but not easy either) and, as I said, you would have to have an image of the whole border.

    # June 23, 2013 at 6:15 am

    This reply has been reported for inappropriate content.

    The going past part is doable, made this a while ago:

    The sketched effect, not so sure. I guess you can make the extensions uneven length to make it look more sketched.

    # June 23, 2013 at 6:07 pm

    Yes, u can also us absolute positioning to achieve it.

    # February 17, 2014 at 4:44 am

    Made this today for a client using both the before and after pseudo class, and adding a small rotation on both. Forked your pen, CrocoDillon.

    More of a comic book cell sketchy border, but I think it’s what you’re looking for.

    This one uses Sass and Bourbon, but the css is viewable easily by clicking the css header.

    100% Code, no images required. Hope it helps!

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed