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 the time

import Emotion from "@emotion/styled"
import { chamfered } from "corners"

const styled = {
  chamferedDiv: Emotion(chamfered.div.with({ cornerSize: 30 })),
}

export default styled.chamferedDiv`
  box-sizing: border-box;
  width: 100%;
  color: red;
  background: #e3e3e3;
  display: flex;
  font-size: 5vmin;
  font-family: Charter;
  justify-content: center;
  align-items: center;
  padding: 30px;
`

`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 almost the time

import Emotion from "@emotion/styled"
import { semiChamfered } from "corners"

const styled = {
  semiChamferedDiv: Emotion(semiChamfered.div.with({ cornerSize: 30 })),
}

export default styled.semiChamferedDiv`
  background: #e3e3e3;
  font-size: 5vmin;
  font-family: Charter;
  padding: 30px;
`

`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:

This is a rounded div, or a "squircle"

import Emotion from "@emotion/styled"
import { rounded } from "corners"

const styled = {
  roundedDiv: Emotion(rounded.div.with({ cornerSize: 30 })),
}

export default styled.roundedDiv`
  background: #e3e3e3;
  font-size: 5vmin;
  font-family: Charter;
  padding: 30px;
`