Border on each letter?


I just started an University education, and i have an asignment to create a website, and they have about 20 requirements for this website. I’ve done 19 out of 20 and i just can’t figure out the last one…

They want me to create a lightgrey border around every letter in a heading i have, but i have no clue how i can do this, i mean i guess i could assign an class to every letter, but surley there should be another way?

I really appreciate all help i can get, also Im 1 week in to this education, so i take it easy on me, cheers! :slight_smile:

text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

Will add four text shadows, one for each side of each letter, in black, of 1px. Adjust the colour/size as needed (make sure all four are the same for consistency, you’ll get weird effects otherwise)

Don’t go nuts with the size as it gets super ugly the larger you make the shadows.

You can also use SVG filters with CSS, they work almost everywhere as well, but they’re a little bit more complicated.

Hmm, so i must add this to each and every letter in the sentence i got? How would this not be a mess? :o

No, like

.my-bordered-text {
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
<p class="my-bordered-text">Blah blah blah</p>

CSS works by applying rules to elements, you just apply some attribute to some element, you don’t apply styles to individual letters unless you’re doing something uncommon like animating individual letters

You do not have to style every individual letter.

Just add it as a class to the element that has the text.