Curved lines using border

Question

Well, after a little investigation and looking for solutions I've achieved curved lines. But they aren't perfect as I want them .

The desired effect is this:

And this is the current effect:

I'm wondering if someone has a better solution for this or any solution that can achieve the desired effect.

Here's the code :

.left-corner-lines {
      width: 252px;
      float: left;
      min-height: 40px;
      position: relative;
  }
  .left-round-line {
      border-radius: 0 0 0 100%;
      border: 4px solid #fbbc56;
      position: absolute;
      top: 0;
      right: -4px;
  }
  
  .left-round-line.yellow-round {
      height: 12px;
      width: 17px;
      border-color: transparent transparent transparent #fbbc56;
  }
  
  .left-round-line.blue-round {
      height: 21px;
      width: 26px;
      border-color: transparent transparent transparent #0090d0;
  }
  
  .left-round-line.purple-round {
      height: 30px;
      width: 35px;
      border-color: transparent transparent transparent #915da3;
  }
  
  .left-round-line.pink-round {
      height: 39px;
      width: 44px;
      border-color: transparent transparent transparent #cc5299;
  }
  
  .left-round-line.green-round {
      height: 48px;
      width: 53px;
      border-color: transparent transparent transparent #bed140;
  }
  

<div class="left-corner-lines">
     <div class="left-round-line yellow-round"></div>
     <div class="left-round-line blue-round"></div>
     <div class="left-round-line purple-round"></div>
     <div class="left-round-line pink-round"></div>
     <div class="left-round-line green-round"></div>
</div>

Here's the fiddle: http://jsfiddle.net/84t6w8ca/

The desired effect has to be possible to be recreated for the 4 directions possible.

But I only need one for now since I can recreate the others based on that.

I can do an image fallback for lower versions browsers, so don't worry about IE8 or less

Has anyone a better solution for this that can achieve it?

EDIT:

I desire a more rounded corner effect and not so circle ..

What I was thinking is going with overflow:hidden square, and placing divs inside of it with fixed border-radius and bigger in width and height.

I should also warn you that the line is dynamic depending on content and going around the content till the end of the page. Also, it has lines coming from top and bottom. Like this:

EDIT 2:

After @0_o answer I tried to use box-shadows, but you can notice a little blur on it .

Example :

EDIT 3:

After using @NileshMahajan I've achieved the following:

I don't know if it's my eyes going crazy by now, but this is the nearest of what I was trying to achieve.

Answer 1

If you want monochromatic lines, you can do that with just one path element in SVG.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200" viewBox="4 5 30 30">
  <path d="M5 5 A 25 25 0 0 0 30 30 m0-5 A 20 20 0 0 1 10 5 m5 0 A 15 15 0 0 0 30 20 m0-5 A 10 10 0 0 1 20 5 m5 0 A 5 5 0 0 0 30 10" fill="none" stroke="black" stroke-width="2" />
</svg>

If you want different coloured segments, its better to use circle elements here.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100" viewBox="0 0 30 30">
  <defs>
  	<style>
  		circle {cx:30; cy:0; stroke-width:2; fill:transparent;}
  	</style>
  </defs>
  <circle r="5" stroke="#fbbc56" />
  <circle r="10" stroke="#0090d0" />
  <circle r="15" stroke="#915da3" />
  <circle r="20" stroke="#cc5299" />
  <circle r="25" stroke="#bed140" />
</svg>

The advantages of SVG here are :

• Its short and concise.

• Supported on all major browsers (and IE8+) For IE 8-, you can use VML as a fallback (raphael is a good JS library for this)

• No blurring or jagging on all major browsers (as is the case with gradients)

• Gaps can be transparent instead of white or solid color. This is achievable using gradients too

Answer 2

Please check updated fiddle. https://jsfiddle.net/nileshmahaja/84t6w8ca/3/

I have added one container to the entire html

<div class="container">
    <div class="left-corner-lines">
        <div class="left-round-line yellow-round"></div>
        <div class="left-round-line blue-round"></div>
        <div class="left-round-line purple-round"></div>
        <div class="left-round-line pink-round"></div>
        <div class="left-round-line green-round"></div>
    </div>
</div>

also modified your css code

.container{
    position:relative;
    width: 200px;
    height: 200px;
    overflow:hidden;
}
.left-corner-lines {
      width: 200px;
      left: 50%;
      height: 200px;
      position: relative;
      top:-50%
  }
  .left-round-line {
      border-radius:100%;
      border: 5px solid #fbbc56;
      position: absolute;
      left:0;
      right:0;
      top:0;
      bottom:0;
      margin:auto;
  }

  .left-round-line.yellow-round {
      height: 20px;
      width: 20px;
      border-color:#fbbc56;

  }

  .left-round-line.blue-round {
      height: 40px;
      width: 40px;
      border-color: #0090d0;
  }

  .left-round-line.purple-round {
      height: 60px;
      width: 60px;
      border-color: #915da3;
  }

  .left-round-line.pink-round {
      height: 80px;
      width: 80px;
      border-color: #cc5299;
  }

  .left-round-line.green-round {
      height: 100px;
      width: 100px;
      border-color: #bed140;
  }

Answer 3

you can also use box-shadow to achieve this

.left-corner-lines {
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
}
.left-corner-lines:after {
  content: '';
  width: 30px;
  height: 30px;
  right: 0;
  margin: -15px -15px 0 0;
  border-radius: 50%;
  position: absolute;
  box-shadow: 0px 0px 0px 5px #fbbc56, 0px 0px 0px 10px #fff, 0px 0px 0px 15px #0090d0, 0px 0px 0px 20px #fff, 0px 0px 0px 25px #915da3, 0px 0px 0px 30px #fff, 0px 0px 0px 35px #cc5299;
}

<div class="left-corner-lines"></div>