css curved border rendering oddness

Question

I'm trying to draw some logic gates with DIVs and css. I've got things looking mostly OK but or middle gate (OR) has some oddness in the way the borders are drawn in Chrome. There are 2 gaps in the curve. Also in all browsers I've checked the left concave curve of the OR gate thins out at the ends.

jsfiddle

HTML for gates

<div class="gate">
    <div class="outer">
        <div class="inner">
            <div class="andInA"></div>
            <div class="andInB"></div>
            <div class="andOutA"></div>
            <div class="andLeft"></div>
            <div class="andRight"></div>
        </div>
    </div>
</div>
<br />
<div class="gate">
    <div class="outer">
        <div class="inner">
            <div class="orLeft"></div>
            <div class="orBottomRight"></div>
            <div class="orTopRight"></div>
            <div class="orLeftCurve"></div>
            <div class="orInA"></div>
            <div class="orInB"></div>
            <div class="andOutA"></div>
        </div>
    </div>
</div>
<br />
<div class="gate">
    <div class="outer">
        <div class="inner">
            <div class="andInA"></div>
            <div class="andInB"></div>
            <div class="andOutA"></div>
            <div class="andLeft"></div>
            <div class="andRight"></div>
            <div class="nand"></div>
        </div>
    </div>
</div>

CSS for gates

.gate {
    position: relative;
    width: 300px;
    height: 150px;
}
.outer {
    position: relative;
    padding: 0 28.6% 0 0;
    height: 100%;
}
.inner {
    position: relative;
    margin: 0 20% 0 20%;
    width: 100%;
    height: 100%;
}
.gate .andLeft {
    position: absolute;
    left: 0px;
    height: 97%;
    width: 45%;
    background-color: white;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    border-right: 0px solid black;
}
.gate .andRight {
    position: absolute;
    right: 0px;
    height: 97%;
    width: 75%;
    background-color: white;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    border-left: 0px solid black;
    border-right: 2px solid black;
    border-radius: 0% 100% 100% 0%;
}
.gate .nand {
    position: absolute;
    top: 50%;
    right: 20%;
    margin-top: -4%;
    margin-right: -30%;
    width: 10%;
    height: 12%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    border: 2px solid black;
    background-color: white;
    border-radius: 100% 100% 100% 100%;
}
.gate .orLeft {
    position: absolute;
    left: 0px;
    height: 100%;
    width: 25%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color: white;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    border-left: 0px solid black;
    border-right: 0px solid black;
}
.gate .orLeftCurve {
    position: absolute;
    left: -25%;
    height: 100%;
    width: 50%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color: white;
    border-top: 0px solid black;
    border-bottom: 0px solid black;
    border-left: 0px solid black;
    border-right: 2px solid black;
    border-radius: 0% 50% 50% 0%;
}
.gate .orTopRight {
    position: absolute;
    top: 0%;
    right: 0px;
    height: 50%;
    width: 75%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color: white;
    border-top: 2px solid black;
    border-bottom: 0px solid black;
    border-left: 0px solid black;
    border-right: 2px solid black;
    border-radius: 0% 100% 0% 0%;
}
.gate .orBottomRight {
    position: absolute;
    top: 50%;
    right: 0px;
    height: 50%;
    width: 75%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color: white;
    border-top: 0px solid black;
    border-bottom: 2px solid black;
    border-left: 0px solid black;
    border-right: 2px solid black;
    border-radius: 0% 0% 100% 0%;
}

.gate .andInA {
    position: absolute;
    top: 25%;
    margin-left: -20%;
    width: 20%;
    height: 1px;
    border-top: 2px solid black;
}
.gate .andInB {
    position: absolute;
    top: 74%;
    margin-left: -20%;
    width: 20%;
    height: 1px;
    border-bottom: 2px solid black;
}
.gate .andOutA {
    position: absolute;
    top: 50%;
    right: 0px;
    margin-right: -20%;
    width: 20%;
    height: 1px;
    border-top: 2px solid black;
}

.gate .orInA {
    position: absolute;
    top: 25%;
    margin-left: -20%;
    width: 41.5%;
    height: 1px;
    border-top: 2px solid black;
}
.gate .orInB {
    position: absolute;
    top: 74%;
    margin-left: -20%;
    width: 41.5%;
    height: 1px;
    border-bottom: 2px solid black;
}

Answer 1

There seems to be a problem with the width of the border. If you modify to 1px (border-top and border-bottom from each side) it looks good in Chrome. Check it out

.gate .orTopRight {
    position: absolute;
    top: 0%;
    right: 0px;
    height: 50%;
    width: 75%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color: white;
    border-top: 1px solid black; // Modified to 1px
    border-bottom: 0px solid black;
    border-left: 0px solid black;
    border-right: 2px solid black;
    border-radius: 0% 100% 0% 0%;
}
.gate .orBottomRight {
    position: absolute;
    top: 50%;
    right: 0px;
    height: 50%;
    width: 75%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color: white;
    border-top: 0px solid black;
    border-bottom: 1px solid black; // Modified to 1px
    border-left: 0px solid black;
    border-right: 2px solid black;
    border-radius: 0% 0% 100% 0%;
}