Inverted border-radious on one side

Question

I am trying to come to a solution for an inverted side radious on a rectangle. Is it posible to do it? I look over every single site with shapes generators and I didnt find anything. Also i find ways to do it but only in one corner, not in the middle as you can see in the example.

I probably can do it with svg somehow, but finding a solution with css would be nice.

This would be the result i am looking for: Final result

Refluent · Accepted Answer · 2023-03-25T07:34:40.300

[UPDATED]:

It seems I misunderstood what you wanted to do. The effect you are trying to produce can be made with a bit of tinkering around gradient backgrounds:

  div {
    height: 100px;
    width: 200px;
    background-image: -webkit-radial-gradient(
      223px 50%, /* The 223px is what determines which side it is on, so if you wanted it to be on the left side, you would change it to -13px. Alter this to your needs*/
      circle closest-corner,
      rgba(0, 0, 0, 0) 0,
      rgba(0, 0, 0, 0) 55px,
      black 0,
      #af1414 0
    );
  }

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <div></div>
  </body>
</html>

[OLD (misunderstood)]:

You were right about being able to change one corner's radius (border-[top or bottom]-[left or right]-radius properties), but by applying 2 corners with the same radius, you can achieve this exact effect.

As you need it on the bottom-left and topleft corners, you can use the below code:

body {
background-color: #AF1414;
}

h2 {
color: white;
}

div {
background-color: #ffffff;
width: 100px;
height: 90px;
border-top-left-radius: 55px;
border-bottom-left-radius: 55px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<h2>Use this to apply the radius to (a) specific side(s)</h1>
    <div class="side-radius"></div>
</body>
</html>

For more info, see:

Inverted border-radious on one side

1 Answers1