Presets

Corners provides you with the ability to make exotic shapes and associate them with DOM elements on your page. Out of the box, Corners has a number of pre-defined shapes that you can grab and use immediately. These pre-defined shapes are called "presets". Let's take a look at a few of them now.

`chamfered`

The chamfered preset is a rectangle with all of the corners cleaved off, like this:

now is almost the time

import { chamfered } from "corners"

export default function NowIsAlmostTheTime(): JSX.Element {
	return (
		<chamfered.div
			style={{
				fontFamily: `Copperplate`,
				background: `#db9`,
				color: `#ca8`,
				fontSize: `7vmax`,
				padding: `3vmax`,
				margin: `0 auto`,
			}}
		>
			now is almost the time
		</chamfered.div>
	)
}

`semi-chamfered`

Next, the semi-chamfered preset cuts just two edges off of the generic rectangle instead of all four. Let's show an example of how this is used.

now is the time

import { semiChamfered } from "corners"

export default function NowIsTheTime(): JSX.Element {
	return (
		<semiChamfered.div
			style={{
				fontFamily: `Impact`,
				background: `repeating-linear-gradient(
					45deg,
					#fd0,
					#fd0 10px,
					#fe0 10px,
					#fe0 20px
				)`,
				color: `black`,
				fontSize: `7vmax`,
				padding: `30px`,
				margin: `0 auto`,
			}}
		>
			now is the time
		</semiChamfered.div>
	)
}

`rounded`

Okay, this is what you've been waiting for. You know what things look like with border-radius turned on. These items have a very specific look, and it's pretty unsatisfying (if you ask us). But have you seen the rounded corners from systems like iOS? These are very different in shape. Have you ever wanted to do a button or a div on the web the same way that Apple does them on an iPhone? Well, now you can. This shape, incidentally, is called a squircle. Let's compare a div defined by border-radius with a div defined by corners using the rounded preset:

♥️
corners.js

import { rounded } from "corners"

const RoundedDiv60 = rounded.div.with({ cornerSize: 77 })

export default function RoundedDiv(): JSX.Element {
	return (
		<RoundedDiv60
			style={{
				fontFamily: `Manufab`,
				fontWeight: 500,
				textAlign: `center`,
				background: `#7773`,
				color: `var(--bg-color)`,
				fontSize: `3vmin`,
				padding: `12px`,
				margin: `0 auto`,
				minHeight: `33vh`,
				minWidth: `77vw`,
				display: `flex`,
				alignItems: `center`,
				justifyContent: `center`,
			}}
		>
			♥️ <br />
			corners.js
		</RoundedDiv60>
	)
}