Clipping

The way corners works, by default, is to "clip" or "mask" the DOM element that you provide it, but as you become more advanced with using corners, you will likely decide that these training-wheels are getting in your way. You can create very advanced shapes with corners, if you really use it to its fullest extent!

Let's start by turning off clipping. We'll do this by providing the property useClipPath: false to corners when we create a component with it, as follows:

import { css } from "@emotion/react"
import { rounded } from "corners"
import { useState } from "react"

const ButtonStyles = css`
  width: 100%;
  border: none;
  background: #e3e3e3;
  color: black;
  font-size: 5vmin;
  padding: 10px;
`

export default function IncorrectUnclippedRoundedButton(): React.ReactNode {
	const [clicked, setClicked] = useState(false)

	const RoundedButton = rounded.button.with({
		cornerSize: 30,
		useClipPath: false,
		above: { color: `transparent`, stroke: { color: `green`, width: 1 } },
	})

	return (
		<RoundedButton
			onClick={() => {
				setClicked(true)
			}}
			css={ButtonStyles}
		>
			{clicked ? `CLICKED` : `click me!`}
		</RoundedButton>
	)
}

As you can see, the background color of the button "leaks" out of the button now, causing it to look awful. The useClipPath (which defaults to true) had your back on this one, but now that you've decided to turn it off, you're on your own for figuring out the background. But there's a solution!

Adding a layer below your DOM element

corners can deal with this problem quite elegantly by giving you the opportunity to provide an additional layer below your DOM element. To accomplish this, we're going remove the background of the original DOM element (meaning, we need to set it transparent, because buttons have a default background-color). Next, we're going to add a new layer below, as follows:

import { css } from "@emotion/react"
import { rounded } from "corners"
import { useState } from "react"

const ButtonStyles = css`
  width: 100%;
  border: none;
  color: black;
  font-size: 5vmin;
  padding: 10px;
  background: transparent;
`

export default function UnclippedRoundedButton(): React.ReactNode {
	const [clicked, setClicked] = useState(false)

	const AdvancedButton = rounded.button.with({
		cornerSize: 30,
		useClipPath: false,
		above: { color: `transparent`, stroke: { color: `green`, width: 1 } },
		below: { color: `#e3e3e3` },
	})

	return (
		<AdvancedButton
			onClick={() => {
				setClicked(true)
			}}
			css={ButtonStyles}
		>
			{clicked ? `CLICKED` : `Click me!`}
		</AdvancedButton>
	)
}

And that gives us the following:

And now you can see that we have gotten our background back.