Tips for bordering letters with CSS! We will introduce everything from old browser support to the latest technology!

The style that can be specified for the characters displayed in HTML is about color or size, and techniques are required to make it a little more elaborate.

In this article, I’ll show you how to style text using CSS.
Please select the best method based on each specification method and advantages and disadvantages.

how to border letters

This time, we will introduce three methods.

Let’s take a look at each one.

Method 1: Use text-stroke

text-stroke is a new style introduced in CSS3 that allows you to specify a border for text.
Let’s check the sample immediately.

CSS

HTML

Using this method will create a nice border, but the border will be drawn inside the text.
Therefore, if you use a thin font, it will not be displayed beautifully.
If you use it, we recommend using a bold font and text-weight: bold.

Some browsers have restrictions

Since text-stroke is a new style introduced in CSS3, some browsers such as Chrome require a “vendor prefix”.
“Vendor prefix” is an “identifier to clearly indicate that it is an extended function”, and in the above sample

-webkit-text-stroke: 1px red; /* webkitのベンダープレフィックス */

“-webkit-” in the line is that.
It is safe to write both patterns with and without vendor prefixes.

In addition, since it does not correspond to Internet Explorer (IE), the border is not displayed normally.
However, support for IE will end in June 2022, and it will automatically switch to Microsoft Edge, so you don’t have to worry about it unless you have a lot of things to do.

Originally designed for English characters

Text-stroke is tricky to apply to Japanese, especially Kanji, because it draws a line inside the character.
On the contrary, it can be said that it is a method that is easy to apply to designs that use English letters. Let’s check the sample.

CSS

p {
  display: inline-block;
  margin: 1em;
  padding: 1em;
  font-size: xx-large;
  background-color: #ff6d29;
  color: #ff6d29;
  font-weight: bold;
  -webkit-text-stroke: 1px white; 
  text-stroke: 1px white;
}

HTML

<p>
  HELLO, WORLD
</p>

You can see that the design is easier to see than kanji.

If you want to draw a thick border

Since text-stroke spreads the line inside the characters, it is not possible to write a border thicker than the thickness of the characters.
If you actually try it, you will end up with a strange character that can’t be called a border.

CSS

p {
  font-size: xx-large;
  font-weight: bold;
  position: absolute;
  -webkit-text-stroke: 3px red; 
  text-stroke: 3px red;
}

HTML

In order to avoid this, there is a brute force of “overlapping the inner character on the character with the border line”.

CSS

p {
  font-size: xx-large;
  font-weight: bold;
  position: absolute;
}
p.stroke {
  -webkit-text-stroke: 3px red; 
  text-stroke: 3px red;
}

HTML

By using “position: absolute”, two p elements are overlapped and displayed.
It is possible to draw beautifully, but the disadvantage is that it takes time to write the same character twice.
Also, keep in mind that specifying the same character in succession may be disadvantageous for SEO.

Method 2: Use box-shadow

Next, I will show you how to use the “box-shadow” property.
As the name suggests, box-shadow is a style used to add shadows to characters.
Unlike “text-stroke”, it is a style that predates CSS3, so it works fine in almost all browsers.

Let’s check the sample first.

CSS

p.box-shadow {
  font-size: xx-large;
  font-weight: bold;
  text-shadow: 2px 2px 0 red;
}


p.box-shadow-blur {
  font-size: xx-large;
  font-weight: bold;
  text-shadow: 0 0 10px red;
}

HTML

If you set it to normal, you can see that there is a shadow instead of a border.

How to border with box-shadow

box-shadow is

・X-axis, y-axis movement distance
・Blur

Character decoration is done using these two items.

Therefore, it is possible to create a pseudo-frame by setting shadows shifted in a total of 8 directions, up, down, left, right, and diagonally.

CSS

p.shadow {
  font-size: xx-large;
  font-weight: bold;
  text-shadow: -1px -1px 0 red, -1px 0 0 red, -1px 1px 0 red,
                  0 -1px 0 red,                  0 1px 0 red,
                1px -1px 0 red,  1px 0 0 red,  1px 1px 0 red;
}

Bordering scheme with box-shadow

box-shadow is a style that shadows HTML elements by specifying the following items.

Also, box-shadow can set multiple shadows by connecting them with commas.
Therefore, in this case, a total of 8 box-shadows are specified to cast shadows in 8 directions.

Applying this to CSS results in the following CSS code:

The code is a bit cumbersome, but now the frame is displayed outside the character.
In the above example, “0” is specified for blurring, but by specifying a value other than 0 for blurring, a slightly blurred border can be achieved.

Let’s check the sample.

CSS

p.shadow-blur {
  font-size: xx-large;
  font-weight: bold;
  text-shadow: -1px -1px 4px red, -1px 0 4px red, -1px 1px 4px red,
                  0 -1px 4px red,                    0 1px 4px red,
                1px -1px 4px red,  1px 0 4px red,  1px 1px 4px red;
}

HTML

Compared to when only one box-shadow is specified, you can see that a dark border is drawn.
However, if the blur is too far away, it may become difficult to see, so please try to adjust it yourself so that it can be displayed well.

Differences in appearance between text-stroke and box-shadow display

Compare the results using text-stroke and box-shadow.
The example below uses text-stroke and box-shadow to line up the characters with a border.

CSS

p.stroke {
  font-size: xx-large;
  font-weight: bold;
  -webkit-text-stroke: 1px red; 
  text-stroke: 1px red;
}
p.box-shadow {
  font-size: xx-large;
  font-weight: bold;
  text-shadow: 2px 2px 0 red;
}

p.box-shadow-blur {
  font-size: xx-large;
  font-weight: bold;
  text-shadow: 0 0 10px red;
}

/* box-shadowを用いた枠線 */
p.shadow {
  font-size: xx-large;
  font-weight: bold;
  text-shadow: -1px -1px 0 red, -1px 0 0 red, -1px 1px 0 red,
                  0 -1px 0 red,                  0 1px 0 red,
                1px -1px 0 red,  1px 0 0 red,  1px 1px 0 red;
}

Method 3: Create an image with SVG

Finally, I will introduce how to create decorative characters using SVG.
Note that this method does not strictly use CSS.

What is SVG?

SVG stands for “Scalable Vector Graphics” and refers to vector images that can be scaled.

Generally, there are two types of images: vector images and raster images .
Raster images are images that are drawn in dots or pixels, and are common image file formats such as JPG and PNG.
One of the characteristics of raster images is that the colors for dots are fixed, so when enlarged, blurring or jaggies occur, so-called “image degradation” occurs.

Vector images manage information such as vertices, lines, and colors using relative coordinates instead of pixels, and are characterized by being able to be displayed beautifully by redrawing even if the image is enlarged.

SVG can be edited using drawing software such as Adobe Illustrator and InkSpace, but the content is text data that describes coordinate information such as points and lines.
Therefore, if it is a simple SVG, it can be edited with a text editor, and it is also possible to insert SVG as code in HTML.

SVG format

The contents of SVG are described in XML format.
For example, if you want to display characters, write the following code in HTML.

By making good use of this, it is possible to create images with borders, just like CSS.

CSS

svg {
  display: inline-block;
  width: 300px;
  height: auto;
  overflow: visible;
}

HTML

When describing in HTML, SVG can be handled like an HTML element by enclosing it in “svg” tags.
At this time, the text set using the Text tag is recognized as a text element even in HTML.
Therefore, it can be displayed neatly even when viewed on a browser, and you can also select it with the mouse and copy the contents of the characters.

Raster images such as JPG and PNG are not recognized as text, so you cannot select or copy them, but SVG is convenient because it is recognized as text.

Supplement to the “text” tag

Supplement the contents described as attributes in the svg “text” tag.

Decoration using CSS is also possible

When described as SVG tags in HTML, CSS can be used to decorate not only the SVG elements but also the elements inside them.
Therefore, the information of the SVG Text element mentioned earlier can be rewritten as defined by CSS as follows.

CSS

When this is displayed, the same contents as those defined as svg tags, such as fill and stroke, are displayed.

In this way, it is possible to rewrite the content from outside the image by making good use of CSS.
Furthermore, it is possible to dynamically change the color by using JavaScript.
It’s a level that I don’t know if I can call it an “image” anymore.

Notes on manipulating SVG with CSS

When defining with CSS, basically it is necessary to match the definition on the svg tag.
For example, when changing the color of text, specify “color: color name” in normal CSS, but if you want to change the text color of SVG, you need to specify “fill: color name”.
Sometimes they have exactly the same attribute name, such as “font-weight”, so it’s a good idea to check the item name properly when applying styles to SVG elements with CSS.

Advantages of using SVG

SVG is treated as an image, but in HTML it can be treated in the same way as a normal HTML element.
So, while the original image can be created in Adobe Illustrator or Inkspace, you can use CSS to decorate parts of the SVG or manipulate it with JavaScript.

In this way, the great advantage of SVG is that it can be used very conveniently when creating websites.
In particular, when SVG tags are written directly in HTML, they are recognized as text elements, so they are also effective for SEO.

Try SVG Generator

By using SVG images, it is possible to write beautiful borders, but it is a little troublesome to create all the code by yourself.
So let’s generate the characters using an SVG image generator.

Visit image generator site

Go to a site that will generate SVG for you.

When the following screen appears, enter the text and border information.

Specifying characters and decorations

Let’s create an SVG with the following information.

Copy SVG information

Once you have decided on the character you want to make, scroll down.
When scrolling, HTML code including CSV is generated as follows.

Let’s actually display HTML using this code.

CSS

.svgSample1 text {
  font-weight       : normal;
  font-size         : 39px;
  font-family       : Meiryo UI;
  stroke            : #b30000;
  fill              : #ff4d4d;
  letter-spacing    : 5px;
  text-anchor       : middle;
  dominant-baseline : alphabetic;
}
.svgSample1 > svg > use:nth-of-type(1) {
  stroke-width      : 10px;
  paint-order       : stroke;
  stroke-linejoin   : round ;
}
.svgSample1 > svg > use:nth-of-type(2) {
  stroke-width      : 0;
}I was able to see the same outline characters that I saw in the preview.
You can also select and copy the created characters.

By creating with a generator, I was able to generate code that could be used elsewhere.

Summary: Which method is best to use?

I’ve introduced three methods, but in the end, which one is the best to use?
The answer is “it depends on what you use it for”.

SVG is the best way to display beautiful characters, but it takes time and effort because it is necessary to create an SVG image for each displayed character.
Also, it is difficult to consider compatibility with older browsers.