How to make a border-only text in CSS/Javascript

Question

I'm trying to reproduce this kind of text, with transparency inside of it and only a border :

Is this possible to make this in CSS, even with Javascript ?

Refer: https://css-tricks.com/how-to-do-knockout-text/ – fiveelements Jul 27 '19 at 20:11 — fiveelements, Jul 27 '19 at 20:11

score 3 · Answer 1 · edited Jul 27 '19 at 20:17

3

span {
  font-size: 8rem;
  color: black;
  -webkit-text-fill-color: transparent; /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}

<span>ICY</span>

edited Jul 27 '19 at 20:17

Hicka

157
3
16

answered Jul 27 '19 at 20:12

Christian Carrillo

2,751
2
9
15

Kamran Allana · Accepted Answer · 2019-07-29T10:39:04.127

2

You can do it by :

  color: transparent;
  -webkit-text-fill-color: transparent; /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: white;

Reference: https://css-tricks.com/adding-stroke-to-web-text/

edited Jul 29 '19 at 10:39

answered Jul 27 '19 at 20:14

Kamran Allana

543
1
6
25

The Entramanure · Answer 3 · 2019-07-27T20:29:44.793

-2

Technically, you can add a border with some browser-specific prefixes, but don't. IF YOU DO THIS, IT WILL NOT BE SUPPORTED BY ALL BROWSERS. Unfortunately, there is no way to produce an actual border with CSS currently, at least within a regular HTML element. However, you can achieve something similar with SVG.

edited Jul 27 '19 at 20:29

answered Jul 27 '19 at 20:13

The Entramanure

19
1
1
5

How to make a border-only text in CSS/Javascript

3 Answers3