Skip to main content

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.