How Can I Create Inverted Rounded Corners in CSS?

Achieving Inverted Rounded Corners with CSS

In CSS, you can define the top-left corner of an element as rounded using the border-radius-topleft property. However, what if you want to invert this corner, creating a reversed effect?

Traditionally, inverting rounded corners was not feasible with standard CSS. However, modern browsers introduce a solution with the mask-image property.

Solution:

To invert a rounded corner, use mask-image to define a radial gradient that creates a circular cutout.

#aux-container {
  width: 100px;
  height: 100px;
  background: #f00;
  -webkit-mask-image: radial-gradient(circle 10px at 0 0, transparent 0, transparent 20px, black 21px);
}

In this example, a container with a red background is masked with a radial gradient that creates a 10px circular cutout at the top-left corner. The transparent area gradually transitions to black, covering the remaining corner.

By utilizing mask-image, you can effectively invert rounded corners, giving your designs a unique and visually appealing touch.

The above is the detailed content of How Can I Create Inverted Rounded Corners in CSS?. For more information, please follow other related articles on the PHP Chinese website!