CODEWITHSUNDEEP
htmlcssbackgroundcss-shapes
Patryk Lesiecki
Patryk Lesiecki

Reputation: 53

CSS - rounded background

Is that possible in CSS?

enter image description here

If yes, how to do this? I tried with border-top-left-radius but its not the same.

Upvotes: 4

Views: 14933

Answers (5)

Daniel Danielecki
Daniel Danielecki

Reputation: 10542

Try out with the border-radius generator https://border-radius.com

Upvotes: 1

Chandrakant Patil
Chandrakant Patil

Reputation: 1

you can be only paste following css to your code blelow is example or visit https://codepen.io/Chandrakant1594/pen/yEpxOp

<style>
.curved-border {
 height: 200px;
  width: 400px;
  background: #000000;
  border: 3px solid;
  box-shadow: inset 0px -1px 0px black; /* just to make the bottom border look thicker */
  margin-bottom: 4px;
}
.sample1 {
  border-radius: 1500% 1500% 280% 280%/280% 280% 40% 40%;
}
.sample2 {
  border-radius: 0% 0% 100% 100%/0% 0% 30% 30%;
}
</style>
<div class='curved-border sample1'></div>
<div class='curved-border sample2'></div>

Upvotes: 0

Bill Criswell
Bill Criswell

Reputation: 32921

You can get pretty close setting the length and the percentage for border-*-*-radius.

div {
  width: 100%;
  height: 200px;
  background-color: red;
  border-top-left-radius: 50% 20px;
  border-top-right-radius: 50% 20px;
}

Here's a quick demo: https://jsfiddle.net/crswll/wqsebkpz/1/

and one with an image as proof that it works: https://jsfiddle.net/crswll/wqsebkpz/2/

You can find more details here: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius#Formal_syntax

Upvotes: 8

Juan
Juan

Reputation: 1382

Combiner the border radius with the size of your element and add specific tags for moz and other browsers.

example here

html

 <div class="banner">

    </div>

css class

 .banner{
      background-color:black;
      width:100%;
      border-radius:40px 40px 0px 0;
      height:40px;
    }

https://jsfiddle.net/w7o2rbcu/5/

Upvotes: 0

user3047498
user3047498

Reputation: 13

I think border-radius: 10px 10px 0px 9px; is what you are looking for.

Upvotes: 1

Related Questions