How to Use Font Border In Tailwind CSS
Tags: css, tailwindcss, webdev, tutorial
Published: 2024-04-09 10:28:36

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!
<br>
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.
```html
<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](https://larainfo.com/storage/canvas/images/6Rtx8W13HQI0QluuT2fdmAxmOYsgchUFpq6EfCKB.png)
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.
```html
<div class="border border-dashed border-blue-500 p-4">
  <p>This text has a dashed blue border</p>
</div>
```
![tailwind css font border](https://larainfo.com/storage/canvas/images/0wUkfC4s4sq4twiavJ8ZkvUnOgm4leHlmsFT4Q3W.png)
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.
```html
<h2 class="border-b-4 border-red-600 pb-2">Section Title</h2>
```
![tailwind css border text title](https://larainfo.com/storage/canvas/images/haodpTtbsDbgB3Jb20ur4esOrawcDhohiAROrcvb.png)

### 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.
```html
<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](https://larainfo.com/storage/canvas/images/Jpu9cFgG0Q7SiavDo9rid3y0KiAUrbpdnvv7sfzf.png)

### 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.
```html
<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](https://larainfo.com/storage/canvas/images/GkmSg5I51Kyy1Di712uyulIC556LJTH8TtAHNgtX.png)

### See Also
⭐[Create Cookie Consent Design UI Using Tailwind CSS](https://larainfo.com/blogs/create-cookie-consent-design-ui-using-tailwind-css)
⭐[Tailwind CSS + Alpine.js Close Notifications Box](https://larainfo.com/blogs/tailwind-css-alpinejs-close-notifications-box)
⭐[How to Use background blur in Tailwind CSS](https://larainfo.com/blogs/how-to-use-background-blur-in-tailwind-css)