Home >Web Front-end >CSS Tutorial >How Can I Create Inverted Rounded Corners in CSS?

How Can I Create Inverted Rounded Corners in CSS?

DDD
DDDOriginal
2024-12-21 11:22:10947browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn