Need to round the border in css

user_11938967 0
Viewed 91

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

border css
4 Answers

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>

user_86203330

Better?

<!DOCTYPE html>
<html>
<head>
<style> 

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: -3px;
    border-top: solid;
    border-bottom: solid;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    width: 20px;
    height: 18px;
}
</style>
</head>
<body>

<div>
    <p> Rounded List </p>
    <p> Rounded List </p>
    <p> Rounded List </p>
    <p> Rounded List </p>
    <p> Rounded List </p>
</div>


</body>
</html>

user_136721650

I think that this is the solution you want:

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) {
  margin-bottom:-2.5px;
  margin-top:-2px;
  margin-left:9px;
  border-top:2.5px solid #256060;
  border-bottom:2.5px solid #256060;
  border-right: solid #256060;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}

p:nth-child(even) {
  margin-bottom:-2.5px;
  margin-top:-2.5px;
  margin-right:9px;
  border-top: solid #256060;
  border-bottom: solid #256060;
  border-left: solid #256060;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}
<div>
  <p> Rounded List </p>
  <p> Rounded List </p>
  <p> Rounded List </p>
  <p> Rounded List </p>
  <p> Rounded List </p>
</div>

user_132989000

A possibility without a pseudo :

ul { 
  --wS : 4px ; /* set here the size of the border */
  text-align: center;
  width: 150px;
  color: #256060;
  margin: 1em auto;
  list-style:none;
  padding:0 0 0 1em;
  }
li { 
  padding:0;
  margin: 0 0 calc( var(--wS) * -1);
  border:solid var(--wS);
  box-sizing:border-box;
}
li:nth-child(odd) { 
  border-radius:  1em 0 0 1em ;
  transform:translatex(-1em);
  border-right-color:transparent;
}

li:nth-child(even) {
  border-radius: 0   1em 1em 0;
  border-left-color:transparent;
  /* to fit with translated sibblings*/
  text-indent:-1em;
  padding-right:1em;
}

/* show center */
html {background:linear-gradient(to left, gray 50%, transparent 50%);}
ul   {background:linear-gradient(to left, gold 50%, transparent 50%);}
<ul>
  <li> Rounded List </li>
  <li> Rounded List </li>
  <li> Rounded List </li>
  <li> Rounded List </li>
  <li> Rounded List </li>
</ul>

user_24420990
Related