Border Radius

@include('_partials.class-table', [ 'rows' => [ [ '.rounded-none', 'border-radius: 0;', "Remove any border radius from all corners of an element.", ], [ '.rounded-sm', 'border-radius: 0.125rem;', "Apply a small border radius to all corners of an element.", ], [ '.rounded', 'border-radius: 0.25rem;', "Apply the default border radius to all corners of an element.", ], [ '.rounded-md', 'border-radius: 0.375rem;', "Apply a medium border radius to all corners of an element.", ], [ '.rounded-lg', 'border-radius: 0.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-t-none', "border-top-left-radius: 0;\nborder-top-right-radius: 0;", "Remove any border radius from the top corners of an element.", ], [ '.rounded-r-none', "border-top-right-radius: 0;\nborder-bottom-right-radius: 0;", "Remove any border radius from the right corners of an element.", ], [ '.rounded-b-none', "border-bottom-right-radius: 0;\nborder-bottom-left-radius: 0;", "Remove any border radius from the bottom corners of an element.", ], [ '.rounded-l-none', "border-top-left-radius: 0;\nborder-bottom-left-radius: 0;", "Remove any border radius from the left corners of an element.", ], [ '.rounded-t-sm', "border-top-left-radius: 0.125rem;\nborder-top-right-radius: 0.125rem;", "Apply a small border radius to the top corners of an element.", ], [ '.rounded-r-sm', "border-top-right-radius: 0.125rem;\nborder-bottom-right-radius: 0.125rem;", "Apply a small border radius to the right corners of an element.", ], [ '.rounded-b-sm', "border-bottom-right-radius: 0.125rem;\nborder-bottom-left-radius: 0.125rem;", "Apply a small border radius to the bottom corners of an element.", ], [ '.rounded-l-sm', "border-top-left-radius: 0.125rem;\nborder-bottom-left-radius: 0.125rem;", "Apply a small border radius to the left corners of an element.", ], [ '.rounded-t', "border-top-left-radius: 0.25rem;\nborder-top-right-radius: 0.25rem;", "Apply the default border radius to the top corners of an element.", ], [ '.rounded-r', "border-top-right-radius: 0.25rem;\nborder-bottom-right-radius: 0.25rem;", "Apply the default border radius to the right corners of an element.", ], [ '.rounded-b', "border-bottom-right-radius: 0.25rem;\nborder-bottom-left-radius: 0.25rem;", "Apply the default border radius to the bottom corners of an element.", ], [ '.rounded-l', "border-top-left-radius: 0.25rem;\nborder-bottom-left-radius: 0.25rem;", "Apply the default border radius to the left corners of an element.", ], [ '.rounded-t-md', "border-top-left-radius: 0.375rem;\nborder-top-right-radius: 0.375rem;", "Apply a medium border radius to the top corners of an element.", ], [ '.rounded-r-md', "border-top-right-radius: 0.375rem;\nborder-bottom-right-radius: 0.375rem;", "Apply a medium border radius to the right corners of an element.", ], [ '.rounded-b-md', "border-bottom-right-radius: 0.375rem;\nborder-bottom-left-radius: 0.375rem;", "Apply a medium border radius to the bottom corners of an element.", ], [ '.rounded-l-md', "border-top-left-radius: 0.375rem;\nborder-bottom-left-radius: 0.375rem;", "Apply a medium border radius to the left corners of an element.", ], [ '.rounded-t-lg', "border-top-left-radius: 0.5rem;\nborder-top-right-radius: 0.5rem;", "Apply a large border radius to the top corners of an element.", ], [ '.rounded-r-lg', "border-top-right-radius: 0.5rem;\nborder-bottom-right-radius: 0.5rem;", "Apply a large border radius to the right corners of an element.", ], [ '.rounded-b-lg', "border-bottom-right-radius: 0.5rem;\nborder-bottom-left-radius: 0.5rem;", "Apply a large border radius to the bottom corners of an element.", ], [ '.rounded-l-lg', "border-top-left-radius: 0.5rem;\nborder-bottom-left-radius: 0.5rem;", "Apply a large border radius to the left corners of an element.", ], [ '.rounded-t-full', "border-top-left-radius: 9999px;\nborder-top-right-radius: 9999px;", "Fully round the top corners of an element.", ], [ '.rounded-r-full', "border-top-right-radius: 9999px;\nborder-bottom-right-radius: 9999px;", "Fully round the right corners of an element.", ], [ '.rounded-b-full', "border-bottom-right-radius: 9999px;\nborder-bottom-left-radius: 9999px;", "Fully round the bottom corners of an element.", ], [ '.rounded-l-full', "border-top-left-radius: 9999px;\nborder-bottom-left-radius: 9999px;", "Fully round the left corners of an element.", ], [ '.rounded-tl-none', 'border-top-left-radius: 0;', "Remove any border radius from the top left corner of an element.", ], [ '.rounded-tr-none', 'border-top-right-radius: 0;', "Remove any border radius from the top right corner of an element.", ], [ '.rounded-br-none', 'border-bottom-right-radius: 0;', "Remove any border radius from the bottom right corner of an element.", ], [ '.rounded-bl-none', 'border-bottom-left-radius: 0;', "Remove any border radius from the bottom left corner of an element.", ], [ '.rounded-tl-sm', 'border-top-left-radius: 0.125rem;', "Apply a small border radius to the top left corner of an element.", ], [ '.rounded-tr-sm', 'border-top-right-radius: 0.125rem;', "Apply a small border radius to the top right corner of an element.", ], [ '.rounded-br-sm', 'border-bottom-right-radius: 0.125rem;', "Apply a small border radius to the bottom right corner of an element.", ], [ '.rounded-bl-sm', 'border-bottom-left-radius: 0.125rem;', "Apply a small border radius to the bottom left corner of an element.", ], [ '.rounded-tl', 'border-top-left-radius: 0.25rem;', "Apply the default border radius to the top left corner of an element.", ], [ '.rounded-tr', 'border-top-right-radius: 0.25rem;', "Apply the default border radius to the top right corner of an element.", ], [ '.rounded-br', 'border-bottom-right-radius: 0.25rem;', "Apply the default border radius to the bottom right corner of an element.", ], [ '.rounded-bl', 'border-bottom-left-radius: 0.25rem;', "Apply the default border radius to the bottom left corner of an element.", ], [ '.rounded-tl-md', 'border-top-left-radius: 0.375rem;', "Apply a medium border radius to the top left corner of an element.", ], [ '.rounded-tr-md', 'border-top-right-radius: 0.375rem;', "Apply a medium border radius to the top right corner of an element.", ], [ '.rounded-br-md', 'border-bottom-right-radius: 0.375rem;', "Apply a medium border radius to the bottom right corner of an element.", ], [ '.rounded-bl-md', 'border-bottom-left-radius: 0.375rem;', "Apply a medium border radius to the bottom left corner of an element.", ], [ '.rounded-tl-lg', 'border-top-left-radius: 0.5rem;', "Apply a large border radius to the top left corner of an element.", ], [ '.rounded-tr-lg', 'border-top-right-radius: 0.5rem;', "Apply a large border radius to the top right corner of an element.", ], [ '.rounded-br-lg', 'border-bottom-right-radius: 0.5rem;', "Apply a large border radius to the bottom right corner of an element.", ], [ '.rounded-bl-lg', 'border-bottom-left-radius: 0.5rem;', "Apply a large border radius to the bottom left corner of an element.", ], [ '.rounded-tl-full', 'border-top-left-radius: 9999px;', "Fully round the top left corner of an element.", ], [ '.rounded-tr-full', 'border-top-right-radius: 9999px;', "Fully round the top right corner of an element.", ], [ '.rounded-br-full', 'border-bottom-right-radius: 9999px;', "Fully round the bottom right corner of an element.", ], [ '.rounded-bl-full', 'border-bottom-left-radius: 9999px;', "Fully round the bottom left corner of an element.", ], ] ])

Rounded corners

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

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

@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'])

@slot('code')@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'])

@slot('code')@endslot @endcomponent

Rounding sides separately

Use .rounded-{t|r|b|l}{-size?} to only round one side an element.

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

@slot('code')@endslot @endcomponent

Rounding corners separately

Use .rounded-{tl|tr|br|bl}{-size?} to only round one corner an element.

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

@slot('code')@endslot @endcomponent

Responsive

To control the border radius of an element at a specific breakpoint, add a {screen}: prefix to any existing border radius utility. For example, use md:rounded-lg to apply the rounded-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

Border Radiuses

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

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

• 'sm': '0.125rem',
• default: '0.25rem',

• default: '4px',

• 'md': '0.375rem',
• 'lg': '0.5rem',
• 'full': '9999px',

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

@include('_partials.variants-and-disabling', [ 'utility' => [ 'name' => 'border radius', 'property' => 'borderRadius', ], 'variants' => [ 'responsive', ], ])