Search code examples
htmlcssborderborder-radius

Prevent border from bending with the container's border radius

I have a tabs component where the container has a border radius and when the tab item is selected it will have bottom border.

The problem is my border curves up with the border radius when I want it to remain horizontal as shown in this picture below:

Desired Outcome

Desired Outcome

What I've tried

I've tried multiple approaches, the snippet below shows a base example where I've got the selected tab with a border bottom, but it overflows passed the border-radius instead of cutting off which is not desirable. I've also tried some :after css styling to shorten it but then it doesn't merge into the radius like I want it to above i.e. it's too short.

body {
  background-color: #121212;
}

.wrapper {
  padding: 15px;
}

.tabs {
  background-color: #211F22;
  border-radius: 15px;
  display: flex;
  height: 60px;
}

.tab {
  align-items: center;
  color: white;
  display: flex;
  flex: 1;
  justify-content: center;
}

.selected {
  border-bottom: 2px solid #7D53DA;
}
<div class="wrapper">
  <div class="tabs">
    <div class="tab selected">
      Tab 1
    </div>
    <div class="tab">
      Tab 2
    </div>
  </div>
</div>

I've also tried to make the border radius controlled by the tab icon like this:

body {
  background-color: #121212;
}

.wrapper {
  padding: 15px;
}

.tabs {
  background-color: #211F22;
  display: flex;
  height: 60px;
}

.tab {
  align-items: center;
  color: white;
  display: flex;
  flex: 1;
  justify-content: center;
}

.first {
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}

.last {
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}

.selected {
  border-bottom: 2px solid #7D53DA;
}
<div class="wrapper">
  <div class="tabs">
    <div class="tab first selected">
      Tab 1
    </div>
    <div class="tab last">
      Tab 2
    </div>
  </div>
</div>

But the problem with this approach is the border curves up with the radius which also isn't desirable. Any ideas on how to achieve this design with CSS?

Solution

  • You can use a trick that uses an inset box-shadow to achieve this effect. You give your shadow a high value of a negative h-offset with no blur and a spread equal to your h-offset minus your desired border height.

    For example if you want a -5px bottom border you could use the following.

    box-shadow: inset 0px -505px 0px -500px red;

    See https://jsfiddle.net/ynwem642/