Rounded corners

New in Codebase 5.3.3: Reinvention of the way Codebase handles rounded corners. Breaking changes: (1.) Different border radius size classes now only provide values – they need to be paired with rounded (or specific rounded corner class, e.g. rounded-tl) as a modifier; (2.) Now there is only one unrounded reset – instead e.g. for form/button combos, start from unrounded and add what you need. (3.) For fully rounded or circular rounding, you now only need rounded-pill.

The simplest rounded-corner utility in Codebase is rounded:

This will round all four corners by the default 0.5rem.

Rounding each corner separately

Instead of using rounded, you can use one or more of the following:

• rounded-tl top-left / rounded-tr top-right / rounded-br bottom-right / rounded-bl bottom-left

These will round one specific corner by the default 0.5rem.

You can combine these classes, e.g. rounded-tl rounded-tr will round both top corners.

Five “levels” of roundness

Each of the five rounded corner options above provides rhe default 0.5rem border radius. If you want a different border radius (that potentially applies to all four corners), add one of the following modifiers:

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

Note: these modifiers do not provide the border-radius property, only the value (by a CSS variable). You need to pair each of these modifiers with (at least) one of the five rounded corner options above.

Examples using rounded (the default; all corners rounded):

Examples using specified corners:

“Unrounded” corners override

Additionally, there is an unrounded class that removes (all) rounded corners. You would only need this on elements that already have rounded corners. The only elements in Codebase that have rounded corners by default are form elements and buttons. For such combos, use unrounded first, then you can assign new rounded corners only where you need them.

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

Examples:

<form class="flex">
  <input id="search-example" class="unrounded rounded-bl rounded-tl rounded-pill px-2" name="examplename" placeholder="Search..." type="search">
  <button aria-label="Submit" type="submit" class="btn unrounded rounded-tr rounded-br rounded-pill">Search</button>
</form>

Nesting rounded corners

The modifiers rounded (alias rounded rounded-md), rounded rounded-lg, and rounded 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 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: clip; so that the corners of the image are are removedby the wrapper’s rounded corners.

Photo by Pixabay from Pexels.

Using Codebase rounded corner CSS variables in yoru code

All the Codebase rounded corner classes above (except for unrounded) apply the same border radius value potentially to all four corners (from a CSS variable).

But what if you wanted different radius vaues on different corners of the same HTML element? Then 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;
}

Example:

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 aspect-ratio-16x9 relative overflow-clip" 
  style="border-radius: var(--rad-xl) var(--rad-xl) var(--rad-md) var(--rad-md)"
  >
    <img class="img-cover" src="" width="" height="" alt="">
  </div>
  <button 
  class="btn-primary" 
  style="border-radius: var(--rad-md) var(--rad-md) var(--rad-md) var(--rad-xl)"
  >
    <!-- icon -->
  </button>
  <div class="btn-primary rounded">
    <!-- icon -->
  </div>
  <div 
  class="btn-primary" 
  style="border-radius: var(--rad-md) var(--rad-md) var(--rad-xl) var(--rad-md)"
  >
    <!-- icon -->
  </div>
</div>