Tailwind CSS Borders

Basic examples

Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.

Additive

Additive classes are used to add borders.

HTML

        
            
          <span class="border"></span>
          <span class="border-t"></span>
          <span class="border-r"></span>
          <span class="border-b"></span>
          <span class="border-l"></span>

Subtractive

Subtractive classes are used to remove borders.

HTML

        
            
          <span class="border-0"></span>
          <span class="border border-t-0"></span>
          <span class="border border-r-0"></span>
          <span class="border border-b-0"></span>
          <span class="border border-l-0"></span>

Color

Change the border color using utilities built on our theme colors.

HTML

        
            
        <span class="border border-primary"></span>
        <span class="border border-secondary"></span>
        <span class="border border-success"></span>
        <span class="border border-danger"></span>
        <span class="border border-warning"></span>
        <span class="border border-info"></span>

Border width

Use the .border-0, .border, .border-2, .border-4, or .border-8 classes to set the border width.

HTML

        
            
        <span class="border-0"></span>
        <span class="border"></span>
        <span class="border-2"></span>
        <span class="border-4"></span>
        <span class="border-8"></span>

Border radius

Add classes to an element to easily round its corners.

HTML

        
            
        <span class="rounded"></span>
        <span class="rounded-t"></span>
        <span class="rounded-r"></span>
        <span class="rounded-b"></span>
        <span class="rounded-l"></span>
        <span class="rounded-tl"></span>
        <span class="rounded-tr"></span>
        <span class="rounded-br"></span>
        <span class="rounded-bl"></span>
        <span class="rounded-0"></span>

Sizes

Use classes like .rounded, .rounded-lg, or rounded-2xl to apply different border radius sizes to an element.

HTML

        
            
          <span class="rounded-none"></span>
          <span class="rounded-sm"></span>
          <span class="rounded"></span>
          <span class="rounded-md"></span>
          <span class="rounded-lg"></span>
          <span class="rounded-xl"></span>
          <span class="rounded-2xl"></span>
          <span class="rounded-3xl"></span>
          <span class="rounded-full"></span>

Borders

Basic examples

Additive

Subtractive

Color

Border width

Border radius

Sizes

Access restricted

To view this section you must have an active PRO account

Borders

Tailwind CSS Borders

Basic examples

Additive

Subtractive

Color

Border width

Border radius

Sizes

Related resources