CODEWITHSUNDEEP
htmlcss
user7253564
user7253564

Reputation:

curved line css rounded border

How can I get rounded borders at the top and bottom of this curved line. Checkout the white line of this picture, that is what I want to achieve with CSS. Something like this

My Snippet:

.curved-line {
  position: absolute;
  width: 180px;
  height: 90px;
  border: solid 12.5px #000;
  border-color: black transparent transparent transparent;
  border-radius: 50%/100% 100% 0 0;
  transform: rotate(180deg);
  margin-left: 45px;
  margin-top: 60px;
}
<div class="curved-line"></div>

Upvotes: 2

Views: 7372

Answers (5)

rapaelec
rapaelec

Reputation: 1330

use befor and after , so you know use curved try to use 3 curved superimposed :)

.curved-line {
  position: absolute;
  width: 180px;
  height: 100px;
/*   background: black; */
  border: solid 12.5px #000;
  border-color: black transparent transparent transparent;
  border-radius: 50%/100% 100% 0 0;
  transform: rotate(180deg);
  margin-left: 45px;
  margin-top: 60px;
}
.curved-line:before {
  content:'';
  position: absolute;
  width: 25px;
  height: 25px;
  left: 115px;
/*   background: black; */
  border: solid 12.5px #000;
  border-color: white transparent transparent transparent;
  border-radius: 50%/100% 100% 0 0;
  transform: rotate(180deg);
  margin-left: 45px;
  margin-top: 60px;
}
.curved-line:after {
  content:'';
  position: absolute;
  width: 25px;
  height: 25px;
  left: -74px;
/*   background: black; */
  border: solid 12.5px #000;
  border-color: white transparent transparent transparent;
  border-radius: 50%/100% 100% 0 0;
  transform: rotate(180deg);
  margin-left: 45px;
  margin-top: 60px;
}
<div class="curved-line"></div>

Upvotes: 0

sajin nambiar
sajin nambiar

Reputation: 589

You can make the borders rounded using css pseudo class.

.curved-line {
  position: absolute;
  width: 180px;
  height: 90px;
  border: solid 12px #000;
  border-color: black transparent transparent transparent;
  border-radius: 50%/100% 100% 0 0;
  transform: rotate(180deg);
  margin-left: 45px;
  margin-top: 60px;
}
 .curved-line:after{
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #000;
  position: absolute;
  top: 86px;
  display: block;
 left: -11px;
}
 .curved-line:before{
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #000;
  position: absolute;
  top: 86px;
  display: block;
 left: 179px;
}
<div class="curved-line"></div>

Upvotes: 0

Sumesh S
Sumesh S

Reputation: 758

var c = document.getElementById("curvedLine");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(20, 140, 170, 140, 170, 20);
ctx.lineWidth = 10; //width of the line
ctx.lineCap = 'round';
ctx.stroke();
<canvas id="curvedLine"></canvas>

You can also use canvas to do this task

Upvotes: 1

sol
sol

Reputation: 22969

You can use pseudoelements before and after the curved-line class. 

.curved-line {
  position: relative;
  width: 180px;
  height: 90px;
  border: solid 12.5px #000;
  border-color: black transparent transparent transparent;
  border-radius: 50%/100% 100% 0 0;
  transform: rotate(180deg);
}

.curved-line:before {
  content: '';
  position: absolute;
  left: 99%;
  top: 91%;
  background-color: black;
  width: 13px;
  height: 13px;
  border-radius: 50%;
}

.curved-line:after {
  content: '';
  position: absolute;
  left: -7%;
  top: 91%;
  background-color: black;
  width: 13px;
  height: 13px;
  border-radius: 50%;
}
<div class="curved-line"></div>

Upvotes: 1

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

Use :before & :after pseudo elements.

.curved-line:before {
  content: '';
  position: absolute;
  top: 95%;
  left: -12px;
  width: 12.5px;
  height: 12.5px;
  border-radius: 50%;
  background: black;
}

.curved-line:after {
  content: '';
  position: absolute;
  top: 95%;
  right: -11.5px;
  width: 12.5px;
  height: 12.5px;
  border-radius: 50%;
  background: black;
}

Have a look at the snippet below:

.curved-line {
  position: absolute;
  width: 180px;
  height: 90px;
  border: solid 12.5px #000;
  border-color: black transparent transparent transparent;
  border-radius: 50%/100% 100% 0 0;
  transform: rotate(180deg);
  margin-left: 45px;
  margin-top: 60px;
  position: relative;
}

.curved-line:before {
  content: '';
  position: absolute;
  top: 95%;
  left: -12px;
  width: 12.5px;
  height: 12.5px;
  border-radius: 50%;
  background: black;
}

.curved-line:after {
  content: '';
  position: absolute;
  top: 95%;
  right: -11.5px;
  width: 12.5px;
  height: 12.5px;
  border-radius: 50%;
  background: black;
}
<div class="curved-line"></div>

Hope this helps!

Upvotes: 2

Related Questions