Search code examples
cssborder

Need to round the border in css

i want to round the border of element and move up the right element is here my code and i want to make this like showing in image, i have made the borders right rounded but i can not round left border and i have used pseudo class for rounding the left borders

div {
  position: relative;
  text-align: center;
  width: 150px;
  color: #256060;
  margin: auto;
}

p {
  position: relative;
  margin: 0;
}

p:first-child {
  border-top: solid #256060;
}

p:last-child {
  border-bottom: solid #256060;
}

p:nth-child(odd) {
  border-top: solid #256060;
  border-bottom: solid #256060;
  border-right: solid #256060;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}

p:nth-child(even) {}

p:nth-child(even):before {
  content: '';
  position: absolute;
  border-left: solid;
  left: -15%;
  bottom: 0;
  top: 0;
  border-top: solid;
  border-bottom: solid;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  width: 20px;
  height: 15px;
}
<div>
  <p> Rounded List </p>
  <p> Rounded List </p>
  <p> Rounded List </p>
  <p> Rounded List </p>
  <p> Rounded List </p>
</div>

rounded image

Solution

  • You can simplify your logic like below:

    div {
  text-align: center;
  width: 150px;
  color: #256060;
  margin: auto;
}

p {
  position: relative;
  margin:-3px 0;
  padding:8px 0;
}

p::before {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:15px;
  right:0;
  border:3px solid;
  border-left:none;
  border-radius: 0 15px 15px 0;
}

p:nth-child(even)::before {
  transform:scaleX(-1);
  transform-origin:calc(50% - 15px/2) 50%
}
    <div>
  <p> Rounded List </p>
  <p> Rounded List </p>
  <p> Rounded List </p>
  <p> Rounded List </p>
  <p> Rounded List </p>
</div>

    Also like below:

    div {
  text-align: center;
  width: 150px;
  color: #256060;
  margin: auto;
}

p {
  position: relative;
  margin:-3px 0;
  padding:8px 0;
}

p::before {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  border:3px solid;
  border-radius: 15px;
  clip-path:polygon(15px 0,100% 0,100% 100%,15px 100%);
}

p:nth-child(even)::before {
  transform:scaleX(-1);
}
    <div>
  <p> Rounded List </p>
  <p> Rounded List </p>
  <p> Rounded List </p>
  <p> Rounded List </p>
  <p> Rounded List </p>
</div>

    Still another optimization to avoid the negative margin:

    div {
  text-align: center;
  width: 150px;
  color: #256060;
  margin: auto;
}

p {
  position: relative;
  margin:0;
  padding:8px 0;
}

p::before {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  box-shadow:
    0 0 0 1.5px,
    0 0 0 1.5px inset;
  border-radius: 15px;
  clip-path:polygon(15px -100%,200% -100%,200% 200%,15px 200%);
}

p:nth-child(even)::before {
  transform:scaleX(-1);
}
    <div>
  <p> Rounded List </p>
  <p> Rounded List </p>
  <p> Rounded List </p>
  <p> Rounded List </p>
  <p> Rounded List </p>
</div>

    And without pseudo element but without transparency too:

    div {
  text-align: center;
  width: 150px;
  color: #256060;
  margin: auto;
}

p {
  position: relative;
  margin:-3px 0;
  padding:8px 0;
  border-radius:15px;
  border:3px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(to var(--d,left),transparent 15px, currentColor 0) border-box;
}

p:nth-child(odd) {
  --d:right;
}
    <div>
  <p> Rounded List </p>
  <p> Rounded List </p>
  <p> Rounded List </p>
  <p> Rounded List </p>
  <p> Rounded List </p>
</div>