Skip to content
STYLESCAPE

Corner Utilities

Corner radius utilities: shape variants, percentages, edges and individual corners.

Shape Variants

Apply predefined border-radius shapes using utility classes.

Squared, Rounded & Pill

Squared
Rounded
Pill
HTML 
<div class="ss-c-flex--row ss-c-gap--04">
            <div
                class="ss-c-object--corner--squared ss-c-bg--fill_02 ss-c-p--04"
                style="
                width: 120px;
                height: 80px;
                border: 1px solid var(--ss-color-border);
                display: flex;
                align-items: center;
                justify-content: center;
            "
            >
                Squared
            </div>
            <div
                class="ss-c-object--corner--rounded ss-c-bg--fill_02 ss-c-p--04"
                style="
                width: 120px;
                height: 80px;
                border: 1px solid var(--ss-color-border);
                display: flex;
                align-items: center;
                justify-content: center;
            "
            >
                Rounded
            </div>
            <div
                class="ss-c-object--corner--pill ss-c-bg--fill_02 ss-c-p--04"
                style="
                width: 120px;
                height: 80px;
                border: 1px solid var(--ss-color-border);
                display: flex;
                align-items: center;
                justify-content: center;
            "
            >
                Pill
            </div>
        </div>

Percentage Corners

Apply percentage-based border-radius for circular shapes.

Circle & Ellipse Shapes

0%
50%
100%
HTML 
<div class="ss-c-flex--row ss-c-gap--04 ss-c-align--center">
            <div
                class="ss-c-object--corner--0 ss-c-bg--fill_02 ss-c-p--04"
                style="width: 80px; height: 80px; border: 1px solid var(--ss-color-border)"
            >
                0%
            </div>
            <div
                class="ss-c-object--corner--50 ss-c-bg--fill_02 ss-c-p--04"
                style="width: 80px; height: 80px; border: 1px solid var(--ss-color-border)"
            >
                50%
            </div>
            <div
                class="ss-c-object--corner--100 ss-c-bg--fill_02 ss-c-p--04"
                style="width: 80px; height: 80px; border: 1px solid var(--ss-color-border)"
            >
                100%
            </div>
        </div>

Edge-Specific Corners

Apply border-radius to specific edges of an element (top, bottom, start, end).

Top Edge

Rounded top corners only
HTML 
<div
            class="ss-c-object--corner--top ss-c-bg--fill_02 ss-c-p--04 ss-c-mb--04"
            style="width: 200px; border: 1px solid var(--ss-color-border)"
        >
            Rounded top corners only
        </div>

Bottom Edge

Rounded bottom corners only
HTML 
<div
            class="ss-c-object--corner--bottom ss-c-bg--fill_02 ss-c-p--04 ss-c-mb--04"
            style="width: 200px; border: 1px solid var(--ss-color-border)"
        >
            Rounded bottom corners only
        </div>

Start Edge (Left)

Rounded start (left) corners
HTML 
<div
            class="ss-c-object--corner--start ss-c-bg--fill_02 ss-c-p--04 ss-c-mb--04"
            style="width: 200px; border: 1px solid var(--ss-color-border)"
        >
            Rounded start (left) corners
        </div>

End Edge (Right)

Rounded end (right) corners
HTML 
<div
            class="ss-c-object--corner--end ss-c-bg--fill_02 ss-c-p--04 ss-c-mb--04"
            style="width: 200px; border: 1px solid var(--ss-color-border)"
        >
            Rounded end (right) corners
        </div>

Individual Corners

Apply border-radius to a single corner of an element.

Single Corner Variants

Top Start
Top End
Bottom Start
Bottom End
HTML 
<div class="ss-c-flex--row ss-c-gap--04 ss-c-flex--wrap">
            <div
                class="ss-c-object--corner--top-start ss-c-bg--fill_02 ss-c-p--04"
                style="
                width: 120px;
                height: 80px;
                border: 1px solid var(--ss-color-border);
                display: flex;
                align-items: center;
                justify-content: center;
            "
            >
                Top Start
            </div>
            <div
                class="ss-c-object--corner--top-end ss-c-bg--fill_02 ss-c-p--04"
                style="
                width: 120px;
                height: 80px;
                border: 1px solid var(--ss-color-border);
                display: flex;
                align-items: center;
                justify-content: center;
            "
            >
                Top End
            </div>
            <div
                class="ss-c-object--corner--bottom-start ss-c-bg--fill_02 ss-c-p--04"
                style="
                width: 120px;
                height: 80px;
                border: 1px solid var(--ss-color-border);
                display: flex;
                align-items: center;
                justify-content: center;
            "
            >
                Bottom Start
            </div>
            <div
                class="ss-c-object--corner--bottom-end ss-c-bg--fill_02 ss-c-p--04"
                style="
                width: 120px;
                height: 80px;
                border: 1px solid var(--ss-color-border);
                display: flex;
                align-items: center;
                justify-content: center;
            "
            >
                Bottom End
            </div>
        </div>

Custom Combinations

Combine corner utilities to create unique shapes.

Diagonal Corners

Diagonal ↘
Diagonal ↙
HTML 
<div class="ss-c-flex--row ss-c-gap--04">
            <div
                class="ss-c-object--corner--top-start ss-c-object--corner--bottom-end ss-c-bg--fill_02 ss-c-p--04"
                style="
                width: 120px;
                height: 80px;
                border: 1px solid var(--ss-color-border);
                display: flex;
                align-items: center;
                justify-content: center;
            "
            >
                Diagonal ↘
            </div>
            <div
                class="ss-c-object--corner--top-end ss-c-object--corner--bottom-start ss-c-bg--fill_02 ss-c-p--04"
                style="
                width: 120px;
                height: 80px;
                border: 1px solid var(--ss-color-border);
                display: flex;
                align-items: center;
                justify-content: center;
            "
            >
                Diagonal ↙
            </div>
        </div>

Card Header Pattern

Card Header
Card content with squared bottom corners.
Card Footer
HTML 
<div style="width: 280px">
            <div class="ss-c-object--corner--top ss-c-bg--primary ss-c-p--04" style="color: var(--ss-color-background)">
                Card Header
            </div>
            <div class="ss-c-bg--fill_01 ss-c-p--04 ss-c-border--01">
                Card content with squared bottom corners.
            </div>
            <div class="ss-c-object--corner--bottom ss-c-bg--fill_02 ss-c-p--04 ss-c-border--01">
                Card Footer
            </div>
        </div>

Segmented Group Pattern

Rounding only the outer corners of a row of flush segments. (Buttons and form controls are square by design and keep radius 0.)

First
Middle
Last
HTML 
<div class="ss-c-flex--row">
            <div class="ss-c-object--corner--start ss-c-bg--fill_02 ss-c-p--04" style="border: 1px solid var(--ss-color-border-strong)">First</div>
            <div class="ss-c-object--corner--0 ss-c-bg--fill_02 ss-c-p--04" style="border: 1px solid var(--ss-color-border-strong); border-inline-width: 0">Middle</div>
            <div class="ss-c-object--corner--end ss-c-bg--fill_02 ss-c-p--04" style="border: 1px solid var(--ss-color-border-strong)">Last</div>
        </div>

Class Reference

Every corner class and the radius token it applies. Edge and corner classes use the default container radius (--ss-radius-md).

Shape & Percentage Classes

CSS 
.ss-c-object--corner--squared  /* border-radius: 0 */
.ss-c-object--corner--0        /* border-radius: 0 */
.ss-c-object--corner--50       /* border-radius: var(--ss-radius-sm) */
.ss-c-object--corner--rounded  /* border-radius: var(--ss-radius-lg) */
.ss-c-object--corner--100      /* border-radius: var(--ss-radius-full) */
.ss-c-object--corner--pill     /* border-radius: var(--ss-radius-full) */

Edge & Corner Classes

CSS 
.ss-c-object--corner--top           /* top-left + top-right */
.ss-c-object--corner--bottom        /* bottom-left + bottom-right */
.ss-c-object--corner--start         /* top-left + bottom-left */
.ss-c-object--corner--end           /* top-right + bottom-right */
.ss-c-object--corner--top-start     /* top-left */
.ss-c-object--corner--top-end       /* top-right */
.ss-c-object--corner--bottom-start  /* bottom-left */
.ss-c-object--corner--bottom-end    /* bottom-right */