Tailwind Border Width and Style to CSS

Tailwind Border Width and Style in CSS

Tailwind provides fine-grained control over border width, style, and direction. Each class maps to one or more CSS border properties.

Border Width

/* border (default 1px) */
border-width: 1px;

/* border-0 */
border-width: 0px;

/* border-2 */
border-width: 2px;

/* border-4 */
border-width: 4px;

/* border-8 */
border-width: 8px;

Directional Border Width

/* border-t (top only) */
border-top-width: 1px;

/* border-r (right only) */
border-right-width: 1px;

/* border-b (bottom only) */
border-bottom-width: 1px;

/* border-l (left only) */
border-left-width: 1px;

/* border-t-2 */
border-top-width: 2px;

Border Style

/* border-solid */
border-style: solid;

/* border-dashed */
border-style: dashed;

/* border-dotted */
border-style: dotted;

/* border-double */
border-style: double;

/* border-none */
border-style: none;

Combining Border Properties

A typical card border in Tailwind border border-gray-300 rounded-lg translates to:

border-width: 1px;
border-color: #d1d5db;
border-radius: 0.5rem;

Note: Tailwind does not set border-style when using the border class because the browser default is solid. However, it is good practice to set it explicitly in plain CSS.

Divide Utilities

The divide-x and divide-y classes add borders between children using the > * + * selector, which is handled differently than standard border classes.