How to Use Font Border In Tailwind CSS

Enhance your web design with font borders using Tailwind CSS! In this quick guide, we'll show you how to effortlessly add stylish borders to your text. Whether you want to make headings pop or draw attention to key information, font borders are an easy way to elevate your design. Let's get started!


The outer <div> features a black border and 4 units of padding, while the inner <p> tag has a gray border and the same padding. Tailwind CSS makes customization easy with its utility classes for border colors and padding.

<div class="border border-black p-4">
  <p class="border border-gray-400 p-4">This text has a border</p>
</div>

We've applied a dashed border (border-dashed) in a vibrant blue hue (border-blue-500) to the <div>, complemented by padding (p-4) for a tidy text layout with ample surrounding space.

<div class="border border-dashed border-blue-500 p-4">
  <p>This text has a dashed blue border</p>
</div>

We're framing the heading (h2) with a bold bottom border (border-b-4) in a striking red shade (border-red-600), ensuring it commands attention. To maintain a polished look, we've also included padding at the bottom (pb-2) to prevent the text from crowding against the border.

<h2 class="border-b-4 border-red-600 pb-2">Section Title</h2>

User Profile Card with Border

Our user profile card is neatly bordered (border border-gray-300) and softly rounded (rounded-lg), with generous padding (p-4). The profile picture (img) boasts a circular border (rounded-full) in bold blue (border-blue-500), while the name and job title maintain a sleek, standard text style.

<div class="border border-gray-300 rounded-lg p-4">
  <img
    src="https://cdn.pixabay.com/photo/2016/11/18/23/38/child-1837375_640.png"
    class="w-16 h-16 rounded-full border-4 border-blue-500"
    alt="Profile Picture"
  />
  <h3 class="text-lg font-semibold mt-2">John Doe</h3>
  <p class="text-sm text-gray-600">Software Engineer</p>
</div>

Callout Box with Border

This callout box commands attention with a thick left border (border-l-4) in lively green (border-green-500) against a light green backdrop (bg-green-100). The text inside is bold and reassuring ("Success!"), affirming the completion of a transaction.

<div class="border-l-4 border-green-500 bg-green-100 text-green-800 p-4">
  <p class="font-semibold">Success!</p>
  <p>Your transaction has been completed.</p>
</div>

See Also

⭐Create Cookie Consent Design UI Using Tailwind CSS
⭐Tailwind CSS + Alpine.js Close Notifications Box
⭐How to Use background blur in Tailwind CSS