Question

I’m trying to build a tag system with ‘negative border radius’ (I lack a better description).

I use :after and :before to create some faux border the ‘bends outside’. It worked well, but there is some strange behaviour in MSIE. Normally I have top:5px on the :after and :before, but in IE I have to add an extra pixel (results in top: 6px) (See in IE8: the horizontal lines to the left and right should not be visible)

What could that be?

http://jsfiddle.net/rhGZw/3/

<div class="test"><div>foo</div></div>

---

body {
    background: gold;
    margin: 10px;
}
.test {
    display: inline-block;
    height: 30px;
    overflow: hidden;
}
.test > div {
    background: white;
    border-top-left-radius: 5px;
    border-top-right-radius : 5px;
    height: 20px;
    padding: 5px;
    display: inline-block;
}
.test:before {
    content: '';
    width: 5px;
    height: 20px;
    position: relative;
    top: 5px;
    margin-right: -5px;
    background: none;
    border-color: white;
    border-style: solid;
    border-width: 0px;
    border-bottom-width:5px;
    border-right-width:5px;
    border-bottom-right-radius: 10px;
    display: inline-block;
    vertical-align: middle;
    z-index: -1;
}

.test:after {
    content: '';
    width: 5px;
    height: 20px;
    position: relative;
    top: 5px;
    margin-left: -5px;
    background: none;
    border-color: white;
    border-style: solid;
    border-width: 0px;
    border-bottom-width:5px;
    border-left-width:5px;
    border-bottom-left-radius: 10px;
    display: inline-block;
    vertical-align: middle;
    z-index: -1;
}

​

Answer 1

I managed to get the error by myself. It was the vertical-align:middle with the :after and :before which caused the 1px offset