How to Create Curved Line with Rounded Edges

How to create curved line with rounded edges?

You may add two background layers to create the circles at the edges like below:

.line {

  --c:20px; /* control the size */

  

  width: 100px;

  margin-top:-100px;

  display:inline-block;

  box-sizing:border-box;

  border: solid var(--c) transparent;

  border-radius:50%;

  border-bottom-color:red;

  background:

    radial-gradient(farthest-side,red 98%,transparent) left  15% bottom 14%,

    radial-gradient(farthest-side,red 98%,transparent) right 15% bottom 14%;

  background-size:var(--c) var(--c);

  background-origin:border-box;

  background-repeat:no-repeat;

}

/* maintain the square ratio */

.line::before {

  content:"";

  display:block;

  padding-top:100%;

}

<div class="line"></div>

<div class="line" style="--c:30px;width:200px"></div>

<div class="line" style="--c:40px;width:120px"></div>

<div class="line" style="--c:10px;width:150px"></div>

curved line css rounded border

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>

Draw a curved line from an arc edge

You expressed an interest in seeing how this could be solved using the stencil buffer yesterday, so I am following up with some basic pseudo-code.

glClearStencil (0x0);
glClear        (GL_STENCIL_BUFFER_BIT);

glEnable       (GL_STENCIL_TEST);
glStencilFunc  (GL_ALWAYS, 0x0, 0x0);

// Add 1 to stencil buffer at every location the object to be bordered is visible
glStencilOp    (GL_KEEP, GL_KEEP, GL_INCR);

// Draw your grey object

// Only draw the red border where the grey object was never drawn (stencil = 0x0)
glStencilFunc  (GL_EQUAL, 0x0, 0xff);

// Draw your red quarter circles

glDisable     (GL_STENCIL_TEST);

Clearing the stencil buffer everytime you draw your outlined object is probably overkill. If you opt to clear the stencil buffer once per-frame instead, you can do some pretty interesting things. For instance, if you drew the outlines as a separate pass after all non-outlined shapes are drawn you could use this stencil buffer setup to outline the union (instead of including the intersection of objects as part of the drawn outline) of any overlapping objects.. this would allow you to construct more complicated shapes from your simple rounded rectangles.

Of course for this to work, your pixel format must have a stencil buffer. I will have to leave that part up to you, because the process of setting that up is implementation specific.

UIBezierPath - Add rounded corner

Include the following.

circle.lineCap = kCALineJoinRound;

For Swift 3.0 and above

circle.lineCapStyle = .Round;

Draw a curve with css

You could use an asymmetrical border to make curves with CSS.

border-radius: 50%/100px 100px 0 0;

VIEW DEMO

.box {

  width: 500px; 

  height: 100px;  

  border: solid 5px #000;

  border-color: #000 transparent transparent transparent;

  border-radius: 50%/100px 100px 0 0;

}

<div class="box"></div>

How to draw round edges with chart.js for line diagrams

Chart.js has an option, borderJoinStyle, for configuring the type of join used for line plots. The available values are round, bevel, or miter. The following image from MDN (as linked to by the Chart.js documentation on this option) illustrates the style of each value, respectively:

Example usage:

options: {
    elements: {
        line: {
            borderJoinStyle: 'round'
        }
    }
}

ThreeJS how to draw shape with curved edges

You can do it this way:

var Shape = new THREE.Shape();
Shape.absarc(2, 4, 2, Math.PI, Math.PI * 2);
Shape.lineTo(4, 0);
Shape.lineTo(0, 0);

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);

camera.position.set(3, 5, 8);

var renderer = new THREE.WebGLRenderer({

  antialias: true

});

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

scene.add(new THREE.GridHelper(10, 10));

var Shape = new THREE.Shape();

Shape.absarc(2, 4, 2, Math.PI, Math.PI * 2);

Shape.lineTo(4, 0);

Shape.lineTo(0, 0);

var shapeGeom = new THREE.ShapeBufferGeometry(Shape);

var shapeMaterial = new THREE.MeshBasicMaterial({

  color: 0x00ff00,

  side: THREE.DoubleSide

});

var shapeMesh = new THREE.Mesh(shapeGeom, shapeMaterial);

scene.add(shapeMesh);

render();

function render() {

  requestAnimationFrame(render);

  renderer.render(scene, camera);

}

body {

  overflow: hidden;

  margin: 0;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js"></script>

<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

---

Related Topics