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.

Answer 1

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/

Answer 2

If I understood you correctly, you want the border-width to be included in the css-width?!

you should then try the box-sizing attribute via CSS:

box-sizing: border-box

The box-sizing CSS property is used to alter the default CSS box model used to calculate widths and heights of elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification. [Source: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing]

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

[Source: http://css-tricks.com/box-sizing/]