Decoration

Rounded corners

There are several options for rounded corners in Carbon, handled by CSS border radius. All of these apply to all four corners of an element.

Different levels of roundness

  • rounded-sm / rounded / rounded-lg / rounded-pill
sm

rounded-sm

0.25rem (4px) default

base

rounded

Using rounded-sm

lg

rounded-lg

1rem (16px) default

pill

rounded-pill

This will round the left and right of buttons, form elements, etc. where the content width is greater than its height

pill

rounded-pill

This will produce an ellipse if the block element is not a square

Rounded corners on images

If you use a rounded utility on a wrapper around an image without padding), you will also need to add overflow: hidden; so that the corners of the image are hidden.

Lighter image example

Image with utility class <img class="rounded" src="" alt="">

Lighter image example

Image wrapped in <div class="rounded"> (but the image corners protrude into the rounded corners)

Lighter image example

Image wrapped in <div class="rounded overflow-hidden">

Radius-0 corner overrides

If you want to round only some corners and not others, then apply one of these *-0 classes to any element that has rounded corners.

These classes work on all the rounded-* variations above. They also work on buttons and form elements.

  • radius-top-right-0 / radius-bottom-right-0 / radius-bottom-left-0 / radius-top-left-0
  • radius-top-0 / radius-bottom-0 / radius-left-0 / radius-right-0
  • radius-0
radius-top-right-0
radius-bottom-right-0
radius-bottom-left-0
radius-top-left-0
radius-right-0
radius-bottom-0
radius-left-0
radius-top-0
radius-0

radius-0 is useful if you need to remove rounded corners on a middle element of a group, e.g. a button in a button bar.