html - CSS: How to make border top rounded - Stack Overflow

I have a problem with creating a rounded corner for elements, specifically for the top-right corner of the screen – a preview is attached in the image. The goal is to have slightly rounded corners. I tried using border-top-right-radius, but it’s not working. I know that it can be achieved by SVG but is it possible to make it not using SVG?

I tried with border-radius but it doesn't work.

Here an example image of what I want:

.square {
  width: 600px;
  height: 600px;
  background: black;
  border-top-right-radius: 120px;
}

<div class="square">

</div>

I have a problem with creating a rounded corner for elements, specifically for the top-right corner of the screen – a preview is attached in the image. The goal is to have slightly rounded corners. I tried using border-top-right-radius, but it’s not working. I know that it can be achieved by SVG but is it possible to make it not using SVG?

I tried with border-radius but it doesn't work.

Here an example image of what I want:

.square {
  width: 600px;
  height: 600px;
  background: black;
  border-top-right-radius: 120px;
}

<div class="square">

</div>

• html
• css

Share Improve this question Follow edited Jan 3 at 12:03 Naeem Akhtar 1,27411 gold badge1212 silver badges2323 bronze badges asked Jan 2 at 14:34 jejamjejam 1911 silver badge33 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Yes, you can use the CSS clip-path property, something like:

div {
  width: 200px;
  height: 200px;
  background: red;
  clip-path: polygon(98.75% 9.5%, 96.86% 7.47%, 94.46% 5.44%, 85.21% 1.25%, 83.54% 0.75%, 80.75% 0.25%, 78.25% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 14.75%, 100% 12.75%, 99.75% 11.25%);
}

<div></div>

Here's a helpful tool for editing the path: https://bennettfeely.com/clippy/