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>
tailwind css border text
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>
tailwind css font border
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>
tailwind css border text title
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>
tailwind css User Profile Card with Border
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>
tailwind css Callout Box with Border
