Home > Designing, Others > How to Add Text in Borders Using Basic HTML Elements

How to Add Text in Borders Using Basic HTML Elements

December 1st, 2020 Leave a comment Go to comments

Some HTML elements come with preset designs, like the inconveniently small squares of elements, the limited-color bars of elements, and the “something about them bothers me” arrows of the

elements. We can style them to match the modern aesthetics of our websites while making use of their functionalities. There are also many elements that rarely get used as both their default appearance and functionality are less needed in modern web designs.

One such HTML element is

, along with its child element



element is traditionally used to group and access form controls. We can visually notice the grouping by the presence of a border around the grouped content on the screen. The caption for this group is given inside the

element that’s added as the first child of the


CodePen Embed Fallback

This combination of


creates a unique ready-made “text in border” design where the caption is placed right where the border is and the line of the border doesn’t go through the text. The border line “breaks” when it encounters the beginning of the caption text and resumes after the text ends.

In this post, we’ll make use of the


combo to create a more modern border text design that’s quick and easy to code and update.

CodePen Embed Fallback

For the four borders, we need four

elements, each containing a

element inside. We add the text that will appear at the borders inside the


<fieldset><legend>Wash Your Hands</legend></fieldset>
<fieldset><legend>Stay Apart</legend></fieldset>
<fieldset><legend>Wear A Mask</legend></fieldset>
<fieldset><legend>Stay Home</legend></fieldset>

To begin, we stack the

elements on top of each other in a grid cell and give them borders. You can stack them using any way you want — it doesn’t necessarily have to be a grid.

Only the top border of each

element is kept visible while the remaining edges are transparent since the text of the

element appears at the top border of the

by default.

Also, we give all the

elements a box-sizing property with a value of border-box so the width and height of the

elements include their border and padding sizes too. Doing this later creates a leveled design, when we style the


body {
  display: grid; 
  margin: auto; /* to center */
  margin-top: calc(50vh - 170px); /* to center */
  width: 300px; height: 300px; 

fieldset {
  border: 10px solid transparent; 
  border-top-color: black; 
  box-sizing: border-box; 
  grid-area: 1 / 1; /* first row, first column */
  padding: 20px; 
  width: inherit; 

After this, we rotate the last three

elements in order to use their top borders as the side and bottom borders of our design.

/* rotate to right */
fieldset:nth-of-type(2){ transform: rotate(90deg); }
/* rotate to bottom */
fieldset:nth-of-type(3){ transform: rotate(180deg); }
/* rotate to left */
fieldset:nth-of-type(4){ transform: rotate(-90deg); }

Next up is styling the

elements. The key to create smooth border text using a

element is to give it a zero (or small enough) line-height. If it has a large line height, that will displace the position of the border it’s in, pushing the border down. And when the border moves with the line height, we won’t be able to connect all the four sides of our design and will need to readjust the borders.

legend {
  font: 15pt/0 'Averia Serif Libre'; 
  margin: auto; /* to center */
  padding: 0 4px; 

fieldset:nth-of-type(3) > legend { 
  transform: rotate(180deg);

I used the font shorthand property to give the values for the font-size, line-height and font-family properties of the



element that adds the text at the bottom border of our design, fieldset:nth-of-type(3)>legend, is upside-down because of its rotated

parent element. Flip that

element vertically to show its text right-side-up.

Add an image to the first

element and you get something like this:

CodePen Embed Fallback

Lateral margins can move the text along the border. Left and right margins with auto values will center the text, as seen in the above Pen. Only the left margin with an auto value will flush the text to the right, and vice versa, for the right margin.

CodePen Embed Fallback

Bonus: After a brief geometrical detour, here’s an octagonal design I made using the same technique:

CodePen Embed Fallback

The post How to Add Text in Borders Using Basic HTML Elements appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Categories: Designing, Others Tags:
  1. No comments yet.
  1. No trackbacks yet.
You must be logged in to post a comment.