CODEWITHSUNDEEP
htmlcss
Jansindl3r
Jansindl3r

Reputation: 409

how to make cicular border corners (not rounding corners)


how do change border corners style on a font?

-webkit-text-stroke: 3px blue;

this sets the border, it's applied on font's contour.

As you can see in my case I have very sharp thingy on the contour and I would prefer a bit more orthogonal style. As the line would end like on my sketch with red pencil. Or if someone doesn't like this style, can they change to round stroke?

enter image description here

Upvotes: 0

Views: 47

Answers (1)

Aloso
Aloso

Reputation: 5447

I don't think what you are trying to do is possible. You could do it on a <canvas>:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var dpr = window.devicePixelRatio;

function paint() {
  canvas.width = 500 * dpr;
  canvas.height = 120 * dpr;

  ctx.lineJoin = "bevel";
  ctx.lineWidth = 3 * dpr;
  ctx.strokeStyle = "blue";
  ctx.font = (140 * dpr) + "px serif";

  ctx.strokeText("Hello!", 20 * dpr, 110 * dpr);
}
paint();

window.addEventListener("resize", function() {
  if (dpr !== window.devicePixelRatio) {
    dpr = window.devicePixelRatio;
    paint();
  }
});
#myCanvas {
  width: 500px;
  height: 120px;
}
<canvas id="myCanvas"></canvas>

This is what it looks like when you zoom in:

enter image description here

Upvotes: 1

Related Questions