Home
>
Designing ,
Others > How to Add Text in Borders Using Basic HTML Elements
How to Add Text in Borders Using Basic HTML Elements
Some HTML elements come with preset designs, like the inconveniently small squares of
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
.
A
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
and
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
and
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
elements.
<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
elements.
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
elements.
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 .
