How to Add Text in Borders Using Basic HTML Elements

Many HTML elements, while functional, possess default styles that clash with modern web design aesthetics. <fieldset></fieldset> and <legend></legend>, typically used for grouping form controls, offer a unique solution for creating bordered text. This combination inherently positions text within the border, without the border line intersecting the text. This article demonstrates a simple yet effective method to leverage this feature for creating stylish border text designs.

We'll construct a design using four <fieldset></fieldset> elements, each containing a <legend></legend> element for the border text. The core principle involves manipulating the borders and positioning of these elements to achieve the desired effect.

First, we stack the <fieldset></fieldset> elements, applying styles to control their borders. Only the top border of each <fieldset></fieldset> will be visible; the others are made transparent. We also utilize box-sizing: border-box to ensure consistent sizing, including borders and padding. The stacking can be achieved using various layout methods, such as a grid.

Wash Your Hands

Stay Apart

Wear A Mask

Stay Home

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

fieldset {
  border: 10px solid transparent;
  border-top-color: black;
  box-sizing: border-box;
  grid-area: 1 / 1;
  padding: 20px;
  width: inherit;
}

To create the side and bottom borders, we rotate the last three <fieldset></fieldset> elements using CSS transforms:

/* 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, we style the <legend></legend> elements. Crucially, a small or zero line-height is essential for precise border alignment. Larger line heights can displace the border, disrupting the design. We also use CSS transforms to correct the orientation of the bottom <legend></legend> element, which is inverted due to the rotation of its parent <fieldset></fieldset>.

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

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

Adding an image to the first <fieldset></fieldset> enhances the design. Horizontal text alignment within the borders can be adjusted using margin-left and margin-right properties. auto values for both margins center the text.

Bonus: This technique can be extended to create more complex shapes, such as the octagonal design shown in the original example. By carefully adjusting the rotation, positioning, and border styles, a wide variety of creative border text designs are possible.

The above is the detailed content of How to Add Text in Borders Using Basic HTML Elements. For more information, please follow other related articles on the PHP Chinese website!