Rounded corners

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

Six “levels” of roundness

• rounded-sm / rounded (alias rounded-md) / rounded-lg / rounded-xl / rounded-pill / rounded-circle (alias rounded-full)

New in Codebase v.5.2.9: rounded-xl.

Buttons and form inputs have a border radius equivalent to that of rounded-sm.

rounded, rounded-lg, and rounded-xl are designed for nesting when you pair these with p-1, p-2, or p-3 respectively. As you can see below, the nested corners curve nicely without “pinching”.

rounded-xl p-3:

The CSS variables for Codebase border radii are as follows:

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 are hidden (seemingly “clipped”) by the wrapper’s rounded corners.

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

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

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

Photo by Pixabay from Pexels.

Unrounded corner overrides

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

These unrounded-* classes work on all the rounded-* variations above. You can also use them on buttons and form elements.

• unrounded-top-right / unrounded-bottom-right / unrounded-bottom-left / unrounded-top-left
• unrounded-top / unrounded-bottom / unrounded-left / rounded-right
• unrounded-all (alias unrounded)

unrounded (alias unrounded-all) is useful if you need to remove rounded corners on a middle button within a button bar.

Other things you can do with rounded corners

You can use the Codebase variables for border radii directly in your CSS. The variables are as follows:

:root {
  // border radius for rounded corners
  --rad-sm: .25rem; // 4px default
  --rad-md: .5rem; // 8px default
  --rad-lg: 1rem; // 16px default
  --rad-xl: 2.5rem; // 40px default
  --rad-pill: 99rem;
  --rad-circle: 50%;
}

For example, you can assign different values to each corner:

Photo by Oleg Magni from Pexels.

<div class="w-xxs mx-auto my-6 grid equal-3-cols gap-1">
  <div 
  class="cols-1-3 overflow-hidden" 
  style="border-radius: var(--rad-xl) var(--rad-xl) var(--rad-md) var(--rad-md)"
  >
    <!-- image -->
  </div>
  <div 
  class="p-cell flex flex-center bg-teal-200" 
  style="border-radius: var(--rad-md) var(--rad-md) var(--rad-md) var(--rad-xl)"
  >
    <!-- icon -->
  </div>
  <div class="rounded p-cell flex flex-center bg-teal-200">
    <!-- icon -->
  </div>
  <div 
  class="p-cell flex flex-center bg-teal-200" 
  style="border-radius: var(--rad-md) var(--rad-md) var(--rad-xl) var(--rad-md)"
  >
    <!-- icon -->
  </div>
</div>