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(--color_line_secondary);
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(--color_line_secondary);
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(--color_line_secondary);
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"
>
0%
</div>
<div
class="ss-c-object--corner--50 ss-c-bg--fill_02 ss-c-p--04"
style="width: 80px; height: 80px"
>
50%
</div>
<div
class="ss-c-object--corner--100 ss-c-bg--fill_02 ss-c-p--04"
style="width: 80px; height: 80px"
>
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"
>
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"
>
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"
>
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"
>
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(--color_line_secondary);
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(--color_line_secondary);
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(--color_line_secondary);
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(--color_line_secondary);
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(--color_line_secondary);
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(--color_line_secondary);
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-color--white ss-c-p--04">
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">
Card Footer
</div>
</div>Button Group Pattern
HTML
<div class="ss-c-flex--row">
<button class="ss-c-button ss-c-object--corner--start">First</button>
<button class="ss-c-button ss-c-object--corner--0">Middle</button>
<button class="ss-c-button ss-c-object--corner--end">Last</button>
</div>SCSS Mixin Reference
Available mixins for use in custom SCSS.
Shape Variant Mixins
SCSS
// Token-based shape variants @include
object--corner(squared); // border-radius: 0 @include
object--corner(rounded); // border-radius: q(2) @include
object--corner(pill); // border-radius: 50vh // Or use specific variant
mixins @include object--corner--squared; @include
object--corner--rounded; @include object--corner--pill;Percentage Mixins
SCSS
@include object--corner--0; // border-radius: 0
@include object--corner--50; // border-radius: 50% (circle) @include
object--corner--100; // border-radius: 100%Edge-Specific Mixins
SCSS
// Apply to edges (default: q(2)) @include
object--corner--top($radius); // top-left + top-right @include
object--corner--bottom($radius); // bottom-left + bottom-right @include
object--corner--start($radius); // top-left + bottom-left @include
object--corner--end($radius); // top-right + bottom-rightIndividual Corner Mixins
SCSS
// Apply to single corners (default: q(2))
@include object--corner--top-start($radius); // top-left @include
object--corner--top-end($radius); // top-right @include
object--corner--bottom-start($radius); // bottom-left @include
object--corner--bottom-end($radius); // bottom-rightCustom Corners Mixin
SCSS
// Full control over each corner @include
object--corner--custom( $top-left: q(4), $top-right: q(2),
$bottom-right: q(4), $bottom-left: q(2) );Generic Radius Mixin
SCSS
// Apply any radius value with validation
@include object--corner--radius(q(4)); @include
object--corner--radius(16px); @include object--corner--radius(1em 2em);
// horizontal / vertical