tailwindcss/docs/source/docs/border-radius.blade.md

extends	title
_layouts.documentation	Border Radius

Border Radius

Utilities for controlling the border radius of an element.

@include('_partials.feature-badges', [ 'responsive' => true, 'customizable' => true, 'hover' => false, 'focus' => false ])

Class	Properties	Description
.rounded	border-radius: .25rem;	Apply a medium border radius to all corners of an element.
.rounded-sm	border-radius: .125rem;	Apply a small border radius to all corners of an element.
.rounded-lg	border-radius: .5rem;	Apply a large border radius to all corners of an element.
.rounded-full	border-radius: 9999px;	Fully round all corners of an element.
.rounded-none	border-radius: 0;	Remove any border radius from all sides of an element.
.rounded-t	border-bottom-left-radius: 0; border-bottom-right-radius: 0;	Only round the top corners of an element.
.rounded-r	border-top-left-radius: 0; border-bottom-left-radius: 0;	Only round the right side corners of an element.
.rounded-b	border-top-right-radius: 0; border-top-left-radius: 0;	Only round the bottom corners of an element.
.rounded-l	border-top-right-radius: 0; border-bottom-right-radius: 0;	Only round the left side corners of an element.

Rounded corners

Use the .rounded, .rounded-sm, or .rounded-lg utilities to apply different border radius sizes to an element.

@component('_partials.code-sample', ['class' => 'flex justify-around text-sm'])

.rounded-sm

.rounded

.rounded-lg

@slot('code')

@endslot @endcomponent

Pills and circles

Use the .rounded-full utility to create pills and circles.

@component('_partials.code-sample', ['class' => 'flex items-center justify-around text-sm'])

Pill shape

Circle

@slot('code')

Pill shape

Circle

@endslot @endcomponent

No rounding

Use .rounded-none to remove an existing border radius from an element.

This is most commonly used to remove a border radius that was applied at a smaller breakpoint.

@component('_partials.code-sample', ['class' => 'flex justify-around text-sm py-8'])

.rounded-none

@slot('code')

@endslot @endcomponent

Rounding sides separately

Use the .rounded-t, .rounded-r, .rounded-b, or .rounded-l utilities to only round one side of an element.

@component('_partials.code-sample', ['class' => 'flex justify-around text-sm'])

.rounded-t

.rounded-r

.rounded-b

.rounded-l

@slot('code')

@endslot @endcomponent

Responsive

To control the shadow of an element at a specific breakpoint, add a {breakpoint}: prefix to any existing shadow utility. For example, use md:shadow-lg to apply the shadow-lg utility at only medium screen sizes and above.

For more information about Tailwind's responsive design features, check out the Responsive Design documentation.

@component('_partials.responsive-code-sample') @slot('none')

@endslot @slot('sm')

@endslot @slot('md')

@endslot @slot('lg')

@endslot @slot('xl')

@endslot @slot('code')

@endslot @endcomponent

Customizing

By default Tailwind provides five border radius size utilities. You can change, add, or remove these by editing the borderRadius section of your Tailwind config.

If a default border radius is provided, it will be used for the non-suffixed .rounded utility. Any other keys will be used as suffixes, for example the key '2' will create a corresponding .rounded-2 utility.

Note that only the different border radius sizes can be customized; the utilities for controlling which side to round (like .rounded-t) aren't customizable.

@component('_partials.customized-config', ['key' => 'borderRadius'])

• default: '.25rem',

• default: '4px',

• 'sm': '.125rem',
• 'lg': '.5rem',
• 'full': '9999px',

• 'large': '12px', 'none': '0', @endcomponent