CODEWITHSUNDEEP
htmlcss
smilebomb
smilebomb

Reputation: 5483

border on rounded corner

I have a tab in my header nav that has a border on it. The tab has rounded corners. I want the border on my tab to run flush with the border on my header. But the rounded corners appear to create a taper effect. How can I alleviate this? My fiddle: fiddle

css:

.gizmo {
    position:fixed;
    top:0;
    width:100%;
    height:40px;
    background-color:#4c4c4c;
    border-bottom:1px solid red;
}
.tab-shit {
    position:absolute;
    width:40px;
    right:100px;
    height:50px;
    top:7px;
    background-color:#4c4c4c;
    border-radius:0 0 20px 20px;
    border-bottom:1px solid red;
}

html:

<div class="gizmo">
    <div class="tab-shit"></div>
</div>

Upvotes: 2

Views: 296

Answers (3)

smilebomb
smilebomb

Reputation: 5483

The answers provided so far prove that the issue can be solved by adding borders on the left and right and either contracting the DOM element down or clipping it to prevent the left and right borders from appearing above the border of the header div. The tab in my project actually contains an icon, but I simplified it here just to create a proof of my problem. Since my tab contains an icon, I cannot contract the height or clip my element. What I resulted to was using the answers above on a new element that is positioned below my tab. So, my tab is now squared off, and a new span under it has rounded corners, border radius, and borders on the left, bottom, and right.

Upvotes: 0

calvin
calvin

Reputation: 479

So the issue is that the border-bottom declaration doesn't affect the left and right, so the browser is trying to make the transition smooth, since by the top ends of the corners it should be using border-left and border-right. To fix this, I'd suggest applying the border using a pseudo-element. So like this:

.gizmo {
    /* same */
}
.tab-shiz {
    /* same except no border */
    /* border-bottom:4px solid red; */
}
/* add this */
.tab-shiz:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 18px;
    border-radius:0 0 20px 20px;
    border-bottom:1px solid red;
    border-left:1px solid red;
    border-right:1px solid red;
}

Doing this will let you style the border as you wish without affecting much else in the element. Careful if you're using CSS transitions, though, as they don't work on generated content.

Demo

Upvotes: 0

Oriol
Oriol

Reputation: 288620

Try this:

.tab-shit {
    height:20px;
    border:5px solid red;
    border-top: none;
    bottom:-25px;                /* -25 = - (height+border) */
    border-radius:0 0 25px 25px; /*  25 =    height+border  */
}

Demo

It works well if you add a border-bottom to the header: Demo

Upvotes: 1

Related Questions