# Fake rounded corners

I recently had a design where there was a box with rounded corners. However, due to the HTML structure (which I couldn't change) there was an element over the top of the box, making it look like the box wasn't as tall as it actually was. I couldn't add a border-radius to the middle of the box. I had to fake it instead.

## The set up

Here I have a contrived example to show the problem. I have two divs here, `.fake-top` and `.bottom`.

`.bottom` is red.

`.fake-top` is the same colour as the body and covers up the top 50px of bottom.

I've added some opacity to `.fake-top`, so you can see what is where. And that bottom has rounded corners on every corner.

![Red box with rounded corners and a lighter box on top](https://cdn.hashnode.com/res/hashnode/image/upload/v1708286649013/1724f4ce-a405-4a60-983a-d579411689f2.png align="center")

In the real problem I have something on the top left, so it's just the top right corner that needs rounding. Here's how it looks with another div on the top left:

![Red box with rounded corners at the bottom and a grey box on top left](https://cdn.hashnode.com/res/hashnode/image/upload/v1708286775286/7f756fc0-73db-4ef9-8d73-90452d111dfc.png align="center")

## Faking the rounded corner

This is where pseudo-elements come to the rescue. And the time I've spent on [CSS Battle](https://cssbattle.dev/) came in useful.

What we can do is to add two pseudo-elements. One to effectively remove the corner ie make it white: the same colour as the fake-top and body. The other to add a bit of red with a rounded corner.

```css
.fake-top::before,
.fake-top::after {
  content: '';
  position: absolute;
  width: var(--border-radius);
  height: var(--border-radius);
  top: 100%;
  right: 0;
}

.fake-top::before {
  background-color: white;
}

.fake-top::after {
  background-color: red;
  border-top-right-radius: var(--border-radius);
}
```

With just the `before` pseudo-element, it looks like it's had a bite taken out of it:

![Red box now has a bite taken out of the top right corner](https://cdn.hashnode.com/res/hashnode/image/upload/v1708287150310/1ebdbd2c-3136-42cb-bbe4-6dfd818bf979.png align="center")

Here's where the `after` pseudo-element is:

![Black pie slice in the top right corner of the red box](https://cdn.hashnode.com/res/hashnode/image/upload/v1708287245875/f0de5642-6195-464e-8824-32ff102afce6.png align="center")

But make the `after` pseudo-element the same colour as `bottom` then like magic, it looks like this:

![A red box with rounded corners at the bottom and top right, with a grey box at the top left](https://cdn.hashnode.com/res/hashnode/image/upload/v1708286919633/117a3294-122d-483f-9d3c-d097e5e8ca99.png align="center")