CSS - box-sizing issue

Question

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.

That's not what box-sizing does. What on earth are you talking about? — SLaks, Nov 06 '13 at 22:29
Ok then I misunderstood what I read before. I want to do a border for a div which is inside the div. — jseiller, Nov 06 '13 at 22:30
`box-sizing: border-box` should work like that: http://stackoverflow.com/questions/9601357/css-border-inside-div-not-on-edge — 3dgoo, Nov 06 '13 at 22:31
The problem is that my div is actually just a and it has no fixed size. Any solution? — jseiller, Nov 06 '13 at 22:32
@SLaks - What I want to do is to add a border to a . But I want it to be "inside" and not make the element bigger. Do you get what I mean? — jseiller, Nov 06 '13 at 22:36
If your tag is an inline element, adding a border will always increase its size and box-sizing will not help there. Also, you need to specify height for box-sizing to work. Without a height, the border still sits outside the block and affects rendering. — Chandranshu, Nov 06 '13 at 22:44
Thanks for your answer. You made the border-box really clear for me. ;) — jseiller, Nov 06 '13 at 22:49
Hey guys. I actually found the answer to my question. What I wanted to do is add an inside 2px bottom border to a `...`. What I did was to reduce by 2px the padding-bottom of the a and then add my border-bottom. Here the result : http://i.stack.imgur.com/7tjcX.png Thanks a lot. — jseiller, Nov 06 '13 at 23:07

score 1 · Answer 1 · answered Nov 06 '13 at 22:43

1

The easy way is to put a <span> inside the <a> and then put a border on the <span>. Then put the nessesary padding/margin on, either the <a> or the <span>.

answered Nov 06 '13 at 22:43

Adrian Roworth

813
1
7
16

Thanks for your answer. It will not solve my problem but it will surely help me in the future. Thanks ! – jseiller Nov 06 '13 at 22:58

3dgoo · Accepted Answer · 2013-11-06T23:19:11.077

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

CSS - box-sizing issue

2 Answers2