CSS rounded border leaves a gap between border and content

user_3765819 0
Viewed 360

I want to have tabs with rounded borders and there is a weird gap between the border and the content. Can anyone help me get rid of it?

enter image description here

Sandbox link: https://codesandbox.io/s/borders-on-tabs-95cwzp?file=/index.html

body {
  font-family: sans-serif;
}

.container {
  display: flex;
  justify-content: center;
  zoom: 2; /* just to see it better */
}

ul {
  list-style: none;
  display: flex;
  display: flex;
  list-style: none;
  border: 1px solid #133275;
  border-radius: 16px;
  background-color: #9db4d6;
  overflow: hidden;

  /* To reset browser native styles  */
  margin: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 0;
}

li {
  padding: 6px 12px;
  font-size: 20px;
  border-radius: 16px;
}

li.active {
  background-color: #133275;
  color: white;
}
<html>
  <body>
    <div class="container">
      <ul>
        <li class="active">First tab</Item>
        <li>Second tab</Item>
      </ul>
    </div>
  </body>
</html>

A question similar to this one: Gap between background (or children) and rounded border

css html
5 Answers

Answering my own question. Using box-shadow instead of border.

body {
  font-family: sans-serif;
}

.container {
  display: flex;
  justify-content: center;
  zoom: 2; /* just to see it better */
}

ul {
  list-style: none;
  display: flex;
  display: flex;
  list-style: none;
  box-shadow: 0 0 0 1px #133275; /* added this */
  /* border: 1px solid #133275;  Removed this */
  border-radius: 17px; /* Adjusted from 16 to 17*/
  background-color: #9db4d6;
  /* overflow: hidden; Removed this*/ 

  /* To reset browser native styles  */
  margin: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 0;
}

li {
  padding: 6px 12px;
  font-size: 20px;
  border-radius: 16px;
}

li.active {
  background-color: #133275;
  color: white;
}
<html>
  <body>
    <div class="container">
      <ul>
        <li class="active">First tab</Item>
        <li>Second tab</Item>
      </ul>
    </div>
  </body>
</html>

user_37658190

Your inner element is smaller than outer element, you have to use smaller radius for inner elements.

body {
  font-family: sans-serif;
}

.container {
  display: flex;
  justify-content: center;
  zoom: 2; /* just to see it better */
}

ul {
  list-style: none;
  display: flex;
  display: flex;
  list-style: none;
  border: 1px solid #133275;
  border-radius: 16px;
  background-color: #9db4d6;
  overflow: hidden;

  /* To reset browser native styles  */
  margin: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 0;
}

li {
  padding: 6px 12px;
  font-size: 20px;
  border-radius: 13px;
}

li.active {
  background-color: #133275;
  color: white;
}
<html>
  <body>
    <div class="container">
      <ul>
        <li class="active">First tab</Item>
        <li>Second tab</Item>
      </ul>
    </div>
  </body>
</html>

user_192391980

Your first <li> element is a tiny bit smaller than the parent <ul>. Border raidus is calculated from the size of the element. You got two different sized elements so when it's calculated here ( math with pi ), that tiny bit gets noticable.

To see what I'm talking about, remove the border-radius of the aforementioned <li> element.

To solve your problem increase the border-radius of either <li> or <ul>. This will produce different results, so pick your poison.

You can also change the background-color to

background: linear-gradient(to right, #133275 10%, #9db4d6 50%);

Good luck!

user_71006820

J just "Remove" Border from "ul" tag and add in "li" tag. then for active "li" i use "#133275" this color and non active use "#9db4d6" this border color. and your space issue is solve.

body {
  font-family: sans-serif;
}

.container {
  display: flex;
  justify-content: center;
  zoom: 2; /* just to see it better */
}

ul {
  list-style: none;
  display: flex;
  display: flex;
  list-style: none;
  border-radius: 16px;
  background-color: #9db4d6;
  overflow: hidden;

  /* To reset browser native styeld  */
  margin: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 0;
}

li {
  padding: 6px 12px;
  font-size: 20px;
  border-radius: 16px;
      border: 1px solid #9db4d6;
}

li.active {
  background-color: #133275;
  color: white;
  border: 1px solid #133275;
}
<!DOCTYPE html>
<html>

<head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link href="src/styles.css">
</head>

<body>
    <div class="container">

        <ul>
            <li class="active">First tab</Item>
            <li>Second tab</Item>
        </ul>
  </div>
    
</body>

</html>

user_130114860

Another solution is remove first and last childs radius from outer side, because you have overflow hidden in ul. If you have three or more elements, all elements between first and last have fully rounded corners.

   body {
      font-family: sans-serif;
    }

    .container {
      display: flex;
      justify-content: center;
      zoom: 2; /* just to see it better */
    }

    ul {
      list-style: none;
      display: flex;
      display: flex;
      list-style: none;
      border: 1px solid #133275;
      border-radius: 16px;
      background-color: #9db4d6;
      overflow: hidden;
      /* To reset browser native styles  */
      margin: 0;
      margin-block-start: 0;
      margin-block-end: 0;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 0;
    }

    li {
      padding: 6px 12px;
      font-size: 20px;
      border-radius: 13px;
    }

    li.active {
      background-color: #133275;
      color: white;
    }

    ul li:first-child {
      border-radius: 0 16px 16px 0;
    }
    ul li:last-child {
      border-radius:16px 0 0 16px;
    }


**Two tabs:**
         <div class="container">
         <ul>
            <li>First tab</li>
            <li class="active">Second tab</li>
          </ul>
</div>




         <div class="container">
         <ul>
            <li>First tab</li>
            <li>Second tab</li>
            <li class="active">Third tab</li>
            <li>Fourth tab</li>
          </ul>
</div>

user_192391980
Related