Corner Shape

Set the shape for element corners.

Limited availability

This feature does not work in some of the most widely-used browsers.

Chrome
Edge
Firefox
Safari

cs-b
corner-shape: bevel;
cs-n
corner-shape: notch;
cs-r
corner-shape: round;
cs-s
corner-shape: squircle;

Corner Block End Shape

cbes-b
corner-block-end-shape: bevel;
cbes-n
corner-block-end-shape: notch;
cbes-r
corner-block-end-shape: round;
cbes-s
corner-block-end-shape: squircle;

Corner Block Start Shape

cbss-b
corner-block-start-shape: bevel;
cbss-n
corner-block-start-shape: notch;
cbss-r
corner-block-start-shape: round;
cbss-s
corner-block-start-shape: squircle;

Corner Bottom Left Shape

cbls-b
corner-bottom-left-shape: bevel;
cbls-n
corner-bottom-left-shape: notch;
cbls-r
corner-bottom-left-shape: round;
cbls-s
corner-bottom-left-shape: squircle;

Corner Bottom Right Shape

cbrs-b
corner-bottom-right-shape: bevel;
cbrs-n
corner-bottom-right-shape: notch;
cbrs-r
corner-bottom-right-shape: round;
cbrs-s
corner-bottom-right-shape: squircle;

Corner Bottom Shape

cbs-b
corner-bottom-shape: bevel;
cbs-n
corner-bottom-shape: notch;
cbs-r
corner-bottom-shape: round;
cbs-s
corner-bottom-shape: squircle;

Corner End End Shape

cees-b
corner-end-end-shape: bevel;
cees-n
corner-end-end-shape: notch;
cees-r
corner-end-end-shape: round;
cees-s
corner-end-end-shape: squircle;

Corner End Start Shape

cests-b
corner-end-start-shape: bevel;
cests-n
corner-end-start-shape: notch;
cests-r
corner-end-start-shape: round;
cests-s
corner-end-start-shape: squircle;

Corner Inline End Shape

cies-b
corner-inline-end-shape: bevel;
cies-n
corner-inline-end-shape: notch;
cies-r
corner-inline-end-shape: round;
cies-s
corner-inline-end-shape: squircle;

Corner Inline Start Shape

ciss-b
corner-inline-start-shape: bevel;
ciss-n
corner-inline-start-shape: notch;
ciss-r
corner-inline-start-shape: round;
ciss-s
corner-inline-start-shape: squircle;

Corner Left Shape

cls-b
corner-left-shape: bevel;
cls-n
corner-left-shape: notch;
cls-r
corner-left-shape: round;
cls-s
corner-left-shape: squircle;

Corner Right Shape

crs-b
corner-right-shape: bevel;
crs-n
corner-right-shape: notch;
crs-r
corner-right-shape: round;
crs-s
corner-right-shape: squircle;

Corner Start End Shape

cses-b
corner-start-end-shape: bevel;
cses-n
corner-start-end-shape: notch;
cses-r
corner-start-end-shape: round;
cses-s
corner-start-end-shape: squircle;

Corner Start Start Shape

csss-b
corner-start-start-shape: bevel;
csss-n
corner-start-start-shape: notch;
csss-r
corner-start-start-shape: round;
csss-s
corner-start-start-shape: squircle;

Corner Top Left Shape

ctls-b
corner-top-left-shape: bevel;
ctls-n
corner-top-left-shape: notch;
ctls-r
corner-top-left-shape: round;
ctls-s
corner-top-left-shape: squircle;

Corner Top Right Shape

ctrs-b
corner-top-right-shape: bevel;
ctrs-n
corner-top-right-shape: notch;
ctrs-r
corner-top-right-shape: round;
ctrs-s
corner-top-right-shape: squircle;

Corner Top Shape

cts-b
corner-top-shape: bevel;
cts-n
corner-top-shape: notch;
cts-r
corner-top-shape: round;
cts-s
corner-top-shape: squircle;

Media Queries

Prefix a class with a breakpoint to apply it from that width up.

Pseudo Classes

Prefix a class with a state to apply it only while that state matches.