CSS：corner-shape

corner-shape is a new CSS property. It accepts 「round」、「squircle」、「scoop」、「bevel」、「notch」and「square」 values。Developer could bring border-radius & corner-shape together to create vivid shape for layout.

Check the following sample out. It applied corner-shape for rendering PlayStation controller shapes.

  • Shape Size：

  • Border Size：

Tutorial

Chekc the following tutorial and see how the sample works.

Instantiation

Developers could copy / paste the following style、HTML and JavaScript into your web page and check the effect.

style

<style> .container { --gap: 1em; --size: 80px; --border-size-default: 8px; --border-size: var(--border-size-default); --border-color: rgba(236 135 195); --border-radius: 0; --corner-shape: initial; position: relative; inset-inline-start: 50%; translate: -50% 0; inline-size: fit-content; display: flex; gap: var(--gap); flex-wrap: nowrap; .startdust { position: absolute; inset-inline-start: attr(data-x type(<length>), 0px); inset-block-start: attr(data-y type(<length>), 0px); inline-size: attr(data-size type(<length>), 24px); aspect-ratio: 1/1; box-sizing: border-box; box-shadow: var(--shadow-elevations-2); corner-shape: scoop; border: 8px solid rgba(255 255 255); border-radius: var(--size); background-color: rgba(255 255 255); } .canvas { flex-shrink: 0; inline-size: var(--size); aspect-ratio: 1/1; background-color: rgba(255 255 255/.05); box-sizing: border-box; border: var(--border-size) solid var(--border-color); border-radius: var(--border-radius); corner-shape: var(--corner-shape); &[data-type=square] { --border-color: rgba(236 135 195); --border-radius: 0; } &[data-type=triangle] { --border-color: rgba(2 224 141); --border-radius: calc(var(--size) / 2) var(--size); --corner-shape: bevel; --border-radius: calc(var(--size) / 2) / var(--size); /* horizontal / vertical */ border-end-start-radius: 0; border-end-end-radius: 0; } &[data-type=circle] { --border-color: rgba(255 0 29); --border-radius: var(--size); } &[data-type=cross] { --border-color: rgba(96 140 205); --border-size: calc(var(--border-size-default) / 2); --border-radius: calc((var(--size) - (var(--border-size) * 2)) / 2); --corner-shape: notch; rotate: 45deg; } } } </style>

HTML

<div class="container container--maneuver"> <div class="canvas" data-type="triangle"></div> <div class="canvas" data-type="circle"></div> <div class="canvas" data-type="cross"></div> <div class="canvas" data-type="square"></div> <div class="startdust" data-size="16px" data-x="-36px" data-y="-38px"></div> <div class="startdust" data-size="24px" data-x="-18px" data-y="-30px"></div> <div class="startdust" data-size="6px" data-x="-30px" data-y="-14px"></div> </div>

How to detect current rowser support or not ?

Developers could use CSS or JavaScript detect current enviroment support corner-shape or not.

CSS

<style> @supports (corner-shape: bevel) { /* Yes. current enviroment support corner-shape */ ... } </style>

JavaScript

<script type="module"> const support = CSS.supports('corner-shape', 'bevel'); if (support) { /* Yes. current enviroment support corner-shape */ ... } </script>

Reference