### Shape Variants

Apply predefined border-radius shapes using utility classes.

#### Squared, Rounded & Pill

Squared
Rounded
Pill
HTML

    <div class="flex--row gap--04">
                <div
                    class="object--corner--squared bg--fill_02 p--04"
                    style="width: 120px; height: 80px"
                >
                    Squared
                </div>
                <div
                    class="object--corner--rounded bg--fill_02 p--04"
                    style="width: 120px; height: 80px"
                >
                    Rounded
                </div>
                <div
                    class="object--corner--pill bg--fill_02 p--04"
                    style="width: 120px; height: 80px"
                >
                    Pill
                </div>
            </div>

### Percentage Corners

Apply percentage-based border-radius for circular shapes.

#### Circle & Ellipse Shapes

0%
50%
100%
HTML

    <div class="flex--row gap--04 align--center">
                <div
                    class="object--corner--0 bg--fill_02 p--04"
                    style="width: 80px; height: 80px"
                >
                    0%
                </div>
                <div
                    class="object--corner--50 bg--fill_02 p--04"
                    style="width: 80px; height: 80px"
                >
                    50%
                </div>
                <div
                    class="object--corner--100 bg--fill_02 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="object--corner--top bg--fill_02 p--04 mb--04"
                style="width: 200px"
            >
                Rounded top corners only
            </div>

#### Bottom Edge

Rounded bottom corners only
HTML

    <div
                class="object--corner--bottom bg--fill_02 p--04 mb--04"
                style="width: 200px"
            >
                Rounded bottom corners only
            </div>

#### Start Edge (Left)

Rounded start (left) corners
HTML

    <div
                class="object--corner--start bg--fill_02 p--04 mb--04"
                style="width: 200px"
            >
                Rounded start (left) corners
            </div>

#### End Edge (Right)

Rounded end (right) corners
HTML

    <div
                class="object--corner--end bg--fill_02 p--04 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="flex--row gap--04 flex--wrap">
                <div
                    class="object--corner--top-start bg--fill_02 p--04"
                    style="width: 120px; height: 80px"
                >
                    Top Start
                </div>
                <div
                    class="object--corner--top-end bg--fill_02 p--04"
                    style="width: 120px; height: 80px"
                >
                    Top End
                </div>
                <div
                    class="object--corner--bottom-start bg--fill_02 p--04"
                    style="width: 120px; height: 80px"
                >
                    Bottom Start
                </div>
                <div
                    class="object--corner--bottom-end bg--fill_02 p--04"
                    style="width: 120px; height: 80px"
                >
                    Bottom End
                </div>
            </div>

### Custom Combinations

Combine corner utilities to create unique shapes.

#### Diagonal Corners

Diagonal ↘
Diagonal ↙
HTML

    <div class="flex--row gap--04">
                <div
                    class="object--corner--top-start object--corner--bottom-end bg--fill_02 p--04"
                    style="width: 120px; height: 80px"
                >
                    Diagonal ↘
                </div>
                <div
                    class="object--corner--top-end object--corner--bottom-start bg--fill_02 p--04"
                    style="width: 120px; height: 80px"
                >
                    Diagonal ↙
                </div>
            </div>

#### Card Header Pattern

Card Header
Card content with squared bottom corners.
Card Footer
HTML

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

#### Button Group Pattern

HTML

    <div class="flex--row">
                <button class="button object--corner--start">First</button>
                <button class="button object--corner--0">Middle</button>
                <button class="button 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-right

#### Individual 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-right

#### Custom 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

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!