Grow your CSS skills. Land your dream job.

Help with Striped Text Border HTML CSS

  • # May 15, 2013 at 12:08 pm

    I’m trying to make a text border that looks like a candy stripe or something similar.
    I’m new to CSS. RIght now I have a dynamic text border in straight HTML.

    <div style="text-align: center;">
    <span style="display:inline-block;padding:5px;border:5px solid #f00;font-size:140%;font-weight:bold;">
    Text goes here and should be able to span 1500 characters.
    </span>
    </div>
    Check out this Pen!

    # May 15, 2013 at 12:25 pm

    Add it like an html image

    ``

    # May 15, 2013 at 12:49 pm

    I had to remove the picture however per request

    # May 15, 2013 at 1:43 pm

    You could play around with border-image, but it’s not widely supported.

    I would probably do what Paulie suggested in a div with a chunk of padding. Then nest a second div inside of that.

    Something like this…

    http://cdpn.io/LHAxI

    # May 15, 2013 at 1:45 pm
    Check out this Pen!

    # May 15, 2013 at 2:45 pm

    Or if you want pure CSS, Chris recently wrote a blog post about something similar: [Uniqlo Striped Hovers](http://css-tricks.com/uniqlo-stripe-hovers/)

    You’d just have to strip out the hover bit, edit it to fit your context, and you’re good to go. Something roughly like this [CodePen](http://codepen.io/JoshBlackwood/pen/jhrDn)

    # May 15, 2013 at 4:16 pm

    Thank you all very much! This is my first day using CSS and I’ve learned a ton. I will tinker with using an image I found as the border and have text with padding.

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

You must be logged in to reply to this topic.

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