[css-borders-4] Use cases for corner-shape #6980
Description
The point of this thread is to collect designs from existing websites where corner-shape would make web developers jobs easier. Current live sites are preferred to demos.
Some related links:
Similar thread from 2013 when the idea of corner-shape was first introduced (note: most use case example from this thread now are dead or link to pages that have been redesigned):
https://lists.w3.org/Archives/Public/www-style/2013Mar/0505.html
Lea's original svg corner-shape demo:
https://projects.verou.me/corner-shape/
The working draft spec in it's current state:
https://drafts.csswg.org/css-backgrounds-4/#corner-shaping
corner shape related paintAPI worklets:
- scoop (Surma): https://houdini.how/#demo-@houdini-modules/border-radius-reverse
- all 4 corners scooped and same size for each
- Corner shapes (iamvdo): https://css-houdini.rocks/corner-shape
- all 4 corners same shape and size. Round/bevel/scoop/notch options
- angled-corners (Una Kravets) https://houdini.how/#demo-angled-corners
- border only no fill. option for different corner sizes per corner but only corners with same width and height
- squircle (PavelLaptev) https://pavellaptev.github.io/squircle-houdini-css/
- CSS corner-shape (jsnkuhn) https://github.com/jsnkuhn/corner-shape
- filled and stroked background-image supported
--corner-shapeallows per corner shaping including mixing of shapes (angle/scoop/notch/round)--corner-sizeoptions for fullborder-radius8 value slash syntax (allows for each corner to have different width and height)
Example Index:
Angle/Bevel
https://www.marvel.com/ (#6980 (comment))
https://www.zelda.com/ (#6980 (comment))
https://thewitcher.com/en/witcher3 (#6980 (comment))
https://www.leagueoflegends.com/en-us/ (#6980 (comment))
https://nierautomata.square-enix-games.com/en-us/home/ (#6980 (comment))
https://www.guerrilla-games.com/play/horizon (#6980 (comment))
https://www.animal-crossing.com/new-horizons/ (#6980 (comment))
https://squoosh.app/ (#6980 (comment))
https://www.polygon.com/ (#6980 (comment))
https://www.starwars.com/news/brian-volk-weiss-interview (#6980 (comment))
https://festival.gamesforchange.org/ (#6980 (comment))
opera GX new tab page (#6980 (comment))
https://elderscrolls.bethesda.net/en/skyrim (#6980 (comment))
https://www.videogameschronicle.com/ (#6980 (comment))
https://www.monsterhunter.com/rise/us/ (#6980 (comment))
Angle/Bevel extended
https://www.xbox.com/en-US (#6980 (comment))
https://metroid.nintendo.com/ (#6980 (comment))
discord.com (#6980 (comment))
https://www.smashbros.com/en_US/ (#6980 (comment))
https://www.marcustheatres.com/ (#6980 (comment))
Scoop
https://diamondpearl.pokemon.com/en-us/ (#6980 (comment))
https://playwonderlands.2k.com/ (#6980 (comment))
Community Theater site using simple background for a ticket shape
(#6980 (comment))
https://www.residentevil.com/village/us/ (#6980 (comment))
https://bethesda.net/en/game/starfield/media?type=video (#6980 (comment))
Scoop extended
Notch
https://www.zelda.com/links-awakening/ (#6980 (comment))
Notch extended
Squircle
Squircle extended
discord.com? (#6980 (comment))
Mixed shapes
https://playvalorant.com/en-us/ (#6980 (comment))
https://unite.pokemon.com/en-us/ (#6980 (comment))
VScode (#6980 (comment))