Text in Border CSS HTML

<fieldset> and <legend>: Semantics and Organization

The HTML essentials

For a consistent structure and accessible design, lean on the <fieldset> and <legend>. This pairing is perfect when you want to integrate text within styled borders while ensuring your HTML stays semantic:

<fieldset>
  <legend>Your Title</legend>
  <!-- Your rad content -->
</fieldset>


Customizing the <fieldset> with CSS gives you control over the border itself, while <legend> manages the title.

Boosting readability: Padding, negative margins and more

By setting display: inline-block to your text, you're promoting a natural width adjustment. Defining margin-top in em units for titles preserves their size relation with font sizes. All of this, plus a touch of CSS padding, crafts an inviting border illusion.

Ever walked and texted only to stumble upon a wall? To avoid that on the web page, add background images on div elements or apply relative and absolute positioning across elements within the div.

<fieldset> Animation in jQuery

Making the border dance (not literally!)

Nothing screams engagement like added animations. Rev up your visual appeal with jQuery animations on the <fieldset>:

$("fieldset").on("click", function() {
  $(this).hide().fadeIn("slow").css("border-color", "red"); // You've got 'red' on you...
});


This code spices things up by changing the border color to red when the fieldset is clicked. Yeah, take that static borders!

More Scenarios, More Power

Negative margins to the rescue

Apply negative margins to break the monotony of borders:

h1 {
  margin-top: -10px; /* Who's on top now? */
  background: #FFFFFF; /* Maintaining the pure aura */
}


Flex your design with flex-direction

Achieve a neat and modern look with a vertical layout using the flexbox's flex-direction property.

Enter the pseudo-elements, exit boredom

Play around with ::before and ::after pseudo-elements:

.bordered-text::after {
  content: '';
  position: absolute;
  height: 3px;
  background-color: black;
  width: 100%;
  top: 10px;  /* Steady... steady... */
}


This adds an understated line beneath the text. Little details make the difference!

Keep text visible when parent element is hidden

Keep essential elements (like an h1 tag) visible by detaching and prepending them to the body:

$('h1').on('click', function() {
  $(this).detach().prependTo('body').show(); // Like a magic trick!
});


Your h1 tag now pulls a Houdini as its parent div gets hidden!