CSS rounded border leaves a gap between border and content-CodePudding

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?

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 >
      <ul>
        <li >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

CodePudding user response：

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 >
      <ul>
        <li >First tab</Item>
        <li>Second tab</Item>
      </ul>
    </div>
  </body>
</html>

CodePudding user response：

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 >
      <ul>
        <li >First tab</Item>
        <li>Second tab</Item>
      </ul>
    </div>
  </body>
</html>

CodePudding user response：

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!

CodePudding user response：

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 >

        <ul>
            <li >First tab</Item>
            <li>Second tab</Item>
        </ul>
  </div>
    
</body>

</html>