Create a rounded border around the inner corner of the active menu

Question

Create a rounded border around the inner corner of the active menu

I have been struggling to create a curved border for an active/selected menu. Despite trying various solutions from Google, I can't seem to eliminate the square corners. Any help or suggestions would be greatly appreciated! Thank you in advance!

Check out my FIDDLE HERE.

body {
  background:#eee;width:90%;margin:20px auto
}
ul {
  margin: 0;
  padding: 0;
}
ul li {
  display: inline-block;
  list-style: none;
  position: relative;
  vertical-align:bottom;
}
ul li a {
  padding: 10px 15px;
  display: block;
  line-height: 25px;
  margin-bottom:-1px;
}
ul li.active a {
  background:#fff;
  border:1px solid #aaa;
  border-bottom:0;
  border-radius:5px 5px 0 0;
}

ul li.active:before,
ul li.active:after {
  content:"";
  position:absolute;
  bottom:-1px;
  width:10px;
  height:10px;
  border:solid #aaa;
}
ul li.active:before {
  left:-10px;
  border-radius:8px 0;
  border-width:0 1px 1px 0
}
ul li.active:after {
  right:-10px;
  border-radius: 0 8px;
  border-width:0 0 1px 1px;
}

.content {
  border:1px solid #aaa;background:#fff;height:200px
}

<ul>
    <li><a href="#">tab 1</a></li>
    <li class="active"><a href="#">tab2</a></li>
    <li><a href="#">tab3</a></li>
    <li><a href="#">tab4</a></li>
</ul>
<div class="content"></div>

html css css-shapes

Answer 1

Answer №1

Here is my current solution, but I'm open to finding a better one. I utilized the pseudo element of active a to create a white border that hides the sharp corner.

body {
  background:#eee;width:90%;margin:20px auto
}
ul {
  margin: 0;
  padding: 0;
}
ul li {
  display: inline-block;
  list-style: none;
  position: relative;
  vertical-align:bottom;
}
ul li a {
  padding: 10px 15px;
  display: block;
  line-height: 25px;
  margin-bottom:-1px;
}
ul li.active a {
  background:#fff;
  border:1px solid #aaa;
  border-bottom:0;
  border-radius:5px 5px 0 0;
}

ul li.active:before,
ul li.active:after {
  content:"";
  position:absolute;
  bottom:-1px;
  width:10px;
  height:10px;
  border:solid #aaa;
}
ul li.active:before {
  left:-10px;
  border-radius:50% 0;
  border-width:0 1px 1px 0;
  box-shadow: 1px 1px white;
}
ul li.active:after {
  right:-10px;
  border-radius: 0 50%;
  border-width:0 0 1px 1px;
  box-shadow: -1px 1px white;
}

.content {
  border:1px solid #aaa;background:#fff;height:200px
}

<ul>
    <li><a href="#">tab 1</a></li>
    <li class="active"><a href="#">tab2</a></li>
    <li><a href="#">tab3</a></li>
    <li><a href="#">tab4</a></li>
</ul>
  <div class="content"></div>

UPDATE: After receiving some feedback, I made some adjustments to my previous answer by adding a box-shadow based on jbutler's suggestion to further hide the corners. The original CSS remains mostly the same with the addition of the box-shadow. Check out the updated fiddle HERE.

Answer 2

Here is my current solution, but I'm open to finding a better one. I utilized the pseudo element of active a to create a white border that hides the sharp corner.

body {
  background:#eee;width:90%;margin:20px auto
}
ul {
  margin: 0;
  padding: 0;
}
ul li {
  display: inline-block;
  list-style: none;
  position: relative;
  vertical-align:bottom;
}
ul li a {
  padding: 10px 15px;
  display: block;
  line-height: 25px;
  margin-bottom:-1px;
}
ul li.active a {
  background:#fff;
  border:1px solid #aaa;
  border-bottom:0;
  border-radius:5px 5px 0 0;
}

ul li.active:before,
ul li.active:after {
  content:"";
  position:absolute;
  bottom:-1px;
  width:10px;
  height:10px;
  border:solid #aaa;
}
ul li.active:before {
  left:-10px;
  border-radius:50% 0;
  border-width:0 1px 1px 0;
  box-shadow: 1px 1px white;
}
ul li.active:after {
  right:-10px;
  border-radius: 0 50%;
  border-width:0 0 1px 1px;
  box-shadow: -1px 1px white;
}

.content {
  border:1px solid #aaa;background:#fff;height:200px
}

<ul>
    <li><a href="#">tab 1</a></li>
    <li class="active"><a href="#">tab2</a></li>
    <li><a href="#">tab3</a></li>
    <li><a href="#">tab4</a></li>
</ul>
  <div class="content"></div>

UPDATE: After receiving some feedback, I made some adjustments to my previous answer by adding a box-shadow based on jbutler's suggestion to further hide the corners. The original CSS remains mostly the same with the addition of the box-shadow. Check out the updated fiddle HERE.

Answer 3

Answer №2

To achieve a unique design effect, consider utilizing white square block pseudo-elements :before and :after in conjunction with the li.active a element. By strategically positioning these elements between the radius and the li, you can create an interesting visual style:

ul li.active a:before,
ul li.active a:after {
  content: "";
  position: absolute;
  background-color: white;
  height: 11px;
  width: 10px;
  bottom: -1px;
}

ul li.active a:before {
  left: -6px;
  z-index: 1;
}
ul li.active a:after {
  right: -6px;
  background-color: white;
  z-index: 6;
}

ul li.active:before {
  left:-10px;
  border-radius:8px 0;
  border-width:0 1px 1px 0;
  z-index: 5; // <<< This too
}
ul li.active:after {
  right:-10px;
  border-radius: 0 8px;
  border-width:0 0 1px 1px;
  z-index: 10; // <<< And here
}

For a live demonstration of this technique, visit: http://jsfiddle.net/be5ceL9z/4/

This method essentially masks the square bottom corners of the li.active and #content elements by using small square elements to cover them, while still allowing the border-radius of li.active:before and :after to display properly.

For further insights on this approach, refer to atomictom's detailed explanation:

Learn more at: https://css-tricks.com/tabs-with-round-out-borders/

Answer 4

To achieve a unique design effect, consider utilizing white square block pseudo-elements :before and :after in conjunction with the li.active a element. By strategically positioning these elements between the radius and the li, you can create an interesting visual style:

ul li.active a:before,
ul li.active a:after {
  content: "";
  position: absolute;
  background-color: white;
  height: 11px;
  width: 10px;
  bottom: -1px;
}

ul li.active a:before {
  left: -6px;
  z-index: 1;
}
ul li.active a:after {
  right: -6px;
  background-color: white;
  z-index: 6;
}

ul li.active:before {
  left:-10px;
  border-radius:8px 0;
  border-width:0 1px 1px 0;
  z-index: 5; // <<< This too
}
ul li.active:after {
  right:-10px;
  border-radius: 0 8px;
  border-width:0 0 1px 1px;
  z-index: 10; // <<< And here
}

For a live demonstration of this technique, visit: http://jsfiddle.net/be5ceL9z/4/

This method essentially masks the square bottom corners of the li.active and #content elements by using small square elements to cover them, while still allowing the border-radius of li.active:before and :after to display properly.

For further insights on this approach, refer to atomictom's detailed explanation:

Learn more at: https://css-tricks.com/tabs-with-round-out-borders/

Answer 5

Answer №3

Here is a creative way to achieve a unique design using a combination of rotation and box shadows:

Start with a rectangular div/element:

    +---------+
    | ELEMENT |
    +---------+

Add pseudo elements to the bottom corners with a border radius of 50% to create a circle:

    +---------+
    | ELEMENT |
   O+---------+O

Rotate the elements to create curved corner borders:

    +---------+
    | ELEMENT |
   )+---------+(

Utilize box shadows to hide the elements' bottom corners:

    +---------+
    | ELEMENT |
   ) --------- (

Set the bottom border color to match the active element for a seamless look:

    +---------+
    | ELEMENT |
    )         ( <-- rotated slightly for the corner effect

DEMO

/*FOR DEMO ONLY*/


$(document).ready(function() {
  $('.menu div').click(function() {
    $('.menu div').removeClass("act");
    $(this).addClass("act");
  });
});

html {
  background: lightgray;
}
.menu div {
  display: inline-block;
  height: 50px;
  width: 100px;
  background: white;
  margin: 10px;
  position: relative;
  text-align: center;
  border-radius: 10px 10px 0 0;
  border: 2px solid black;
  cursor:pointer;
}
.menu .act {
  border-bottom-color: white;
  z-index: 40;
}
.act:before,
.act:after {
  content: "";
  position: absolute;
  bottom: -2px;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  z-index: 30;
}
.act:before {
  left: 100%;
  border-left-color: black;
  -webkit-transform: rotate(-40deg);
  -moz-transform: rotate(-40deg);
  transform: rotate(-40deg);
  box-shadow: -20px 2px 0 0 white;
}
.act:after {
  right: 100%;
  border-right-color: black;
  -webkit-transform: rotate(40deg);
  -moz-transform: rotate(40deg);
  transform: rotate(40deg);
  box-shadow: 20px 2px 0 0 white;
}
.panel {
  width: 80vw;
  margin-top: -12px;
  background: white;
  border-top: 2px solid black;
  z-index: 20;
  padding-top: 12px;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <div>1</div>
  <div class="act">2</div>
  <div>3</div>
</div>

<div class="panel">Don't you wish Tabs could just be easy?</div>

Note

The jQuery code included in this demo is specifically for switching tabs, showcasing its functionality.

Answer 6

Here is a creative way to achieve a unique design using a combination of rotation and box shadows:

Start with a rectangular div/element:

    +---------+
    | ELEMENT |
    +---------+

Add pseudo elements to the bottom corners with a border radius of 50% to create a circle:

    +---------+
    | ELEMENT |
   O+---------+O

Rotate the elements to create curved corner borders:

    +---------+
    | ELEMENT |
   )+---------+(

Utilize box shadows to hide the elements' bottom corners:

    +---------+
    | ELEMENT |
   ) --------- (

Set the bottom border color to match the active element for a seamless look:

    +---------+
    | ELEMENT |
    )         ( <-- rotated slightly for the corner effect

DEMO

/*FOR DEMO ONLY*/


$(document).ready(function() {
  $('.menu div').click(function() {
    $('.menu div').removeClass("act");
    $(this).addClass("act");
  });
});

html {
  background: lightgray;
}
.menu div {
  display: inline-block;
  height: 50px;
  width: 100px;
  background: white;
  margin: 10px;
  position: relative;
  text-align: center;
  border-radius: 10px 10px 0 0;
  border: 2px solid black;
  cursor:pointer;
}
.menu .act {
  border-bottom-color: white;
  z-index: 40;
}
.act:before,
.act:after {
  content: "";
  position: absolute;
  bottom: -2px;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  z-index: 30;
}
.act:before {
  left: 100%;
  border-left-color: black;
  -webkit-transform: rotate(-40deg);
  -moz-transform: rotate(-40deg);
  transform: rotate(-40deg);
  box-shadow: -20px 2px 0 0 white;
}
.act:after {
  right: 100%;
  border-right-color: black;
  -webkit-transform: rotate(40deg);
  -moz-transform: rotate(40deg);
  transform: rotate(40deg);
  box-shadow: 20px 2px 0 0 white;
}
.panel {
  width: 80vw;
  margin-top: -12px;
  background: white;
  border-top: 2px solid black;
  z-index: 20;
  padding-top: 12px;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <div>1</div>
  <div class="act">2</div>
  <div>3</div>
</div>

<div class="panel">Don't you wish Tabs could just be easy?</div>

Note

The jQuery code included in this demo is specifically for switching tabs, showcasing its functionality.

Answer 7

Answer №4

Unfortunately, I'm unable to leave a comment at the moment. Is this the desired outcome you are looking for?

For more information, you can check out this link: https://css-tricks.com/tabs-with-round-out-borders/

It seems like adding another pseudo element might be necessary in this case.

Answer 8

Unfortunately, I'm unable to leave a comment at the moment. Is this the desired outcome you are looking for?

For more information, you can check out this link: https://css-tricks.com/tabs-with-round-out-borders/

It seems like adding another pseudo element might be necessary in this case.

Create a rounded border around the inner corner of the active menu

Answer №1

Answer №2

Answer №3

DEMO

Answer №4

Similar questions

Is there a way to replace the message 'no rows to show' with a custom component in ag-Grid for react?

Set the background to be transparent while keeping the text opaque

Enhance your iPhone web app with high-resolution retina images!

Guide to passing arguments to a function within Vue's v-for loop?

Ways to adjust the size or customize the appearance of a particular text in an option

Using jQuery to make a PNG image draggable and allow it to overlap with

What is the best way to stop the content in :after from wrapping onto the following line?

Adjust the size of the text and the textarea at the same time

The CSS styles do not seem to be taking effect on the Bootstrap

Creating a unique chrome extension that swaps out HTML and JavaScript components

dynamic resizing, uniform dimensions

The HTML file's script tag does not function properly

scalable and circular picture displayed within a bootstrap-5 card

What is the method to print hidden text enclosed by the : :before and the : :after spans while using Python along with Selenium?

Creating a stunning effect with radial-gradient on an image element

Problems with alignment in Bootstrap4

What is the process for adding my JSON data to a select dropdown list?

.scss compiling with errors

Unable to submit a fetch request

Deciding whether to use Device WebView Kit or HTML for your project is