How to make a border which wraps around text

Question

I would like to make a text element have a border around it like this in an upcoming ghost dashboard: Ghost blog

I have done this:

    border: 10px solid #ffffff;

however that works for the height but not the width. The width is a lot wider. I know I could set the width to something however I would like the width to update when the text is changed, so there is always a certain amount of space between the text and box on each side.

I'm not sure how to do this or if it needs JS or if it can be done with pure CSS.

Solution

You are going to want to use padding and display:inline-block; on a span element in order to do this. For example:

HTML

<span>GHOST</span>

CSS

span {
    padding: 10px;
    border: 10px solid white;
    display: inline-block;
}

This will allow the border around the text to shrink and grow depending on the length. It will also keep 10px of space between the border and the letters no matter the size.

Here is a fiddle: http://jsfiddle.net/ZDzn2/