Can CSS Create Concave Corners?

Explore the Limits of CSS Border-Radius: Creating the Illusion of Concave Corners

While CSS's border-radius property allows for convex corners, achieving a concave effect seems elusive. Can we defy these design boundaries?

Tricks of the Trade: Shaping Borders with Radial Gradients

Despite the absence of a native concave border-radius option, clever techniques can simulate this effect. One ingenious method involves radial gradients. Take the following code snippet:

<code class="css">#test {
    width: 200px;
    height: 200px;
    background: #888888;
    background:
      radial-gradient(circle 20px at -20% 50%,transparent,transparent 100px,#888888 100px),
      radial-gradient(circle 20px at 120% 50%,transparent,transparent 100px,#888888 100px);
    background-size:100px 200px, 100px 200px;
    background-position:0 0,100% 0;
    background-repeat:no-repeat;
}</code>

This code defines a square element with a background composed of two radial gradients. The placement and transparency of these gradients create the illusion of concave corners.

Cross-Browser Compatibility: A Glimpse into the Past

Note that radial-gradients require prefixes in most Webkit-based browsers. To ensure compatibility with older browsers, consider implementing the legacy gradient syntax as well.

By harnessing the power of radial gradients, you can create the appearance of concave borders, expanding the horizons of web design.

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