Search code examples
htmlcsswebborder-box

CSS - box-sizing issue

I did not find any answer for my question, even if it is really simple. I am using the CSS proprety box-sizing to do an "inside border" for a div (which is actually a <a>...</a>)

.myDiv{ 
       box-sizing: border-box; 
       -moz-box-sizing: border-box; 
       -webkit-box-sizing: border-box;
       border: 2px solid #3498db;
}

But it seams that it is not working at all as the border is the same without border-box properties. Anyone has an answer?

Just to be sure of what I am doing. What I want is to get a <a> an "inside border". I obviously know the border: ...; property but it is making the element bigger and I don't want that. I would like to have something like border: -2px solid #3498db.

[EDIT] I found a solution. Description on the comments.

Solution

  • Using box-sizing: border-box on an inline element with no width will not make the border internal to the elements size.

    Instead you can use the :after pseudo element to make the border over the top of the element.

    HTML

    This is some <span class="textBorder">text</span> and then some more.

    CSS

    .textBorder {
    background: #ffff99;
    position: relative;
}
.textBorder:after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid rgba(0,0,0,0.5);
}

    Demo