CODEWITHSUNDEEP
css
Nag
Nag

Reputation: 956

Border top left and right radius not working on my div element

I want curves at the top left and top right corners of my div. I tried border-top-left-radius and border-top-right-radius but it doesn't seem to be working.

HTML:

 <div id="trape"></div>

CSS:

#trape{
    border-bottom: 100px solid red;
    border-left: 0 solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
    border-top-left-radius:5px;
    border-top-right-radius:10px;
}

I want output something like shown in the below image

desired output

Upvotes: 1

Views: 4964

Answers (2)

Arun AK
Arun AK

Reputation: 4370

You can use border-top-left-radius and border-top-right-radius css like this :

#trape{
background-color: #E0E0E0;
border-left: 0 solid transparent;
border-top-left-radius: 2em;
border-top-right-radius: 10em;
height: 50px;
text-align: center;
line-height: 50px;
color: white;
width: 200px;
}


#trape{
background-color: #E0E0E0;
border-left: 0 solid transparent;
border-top-left-radius: 2em;
border-top-right-radius: 10em;
height: 50px;
text-align: center;
line-height: 50px;
color: white;
width: 200px;
}
<div id="trape">Abstract Murals</div>

Hope it helps :)

Upvotes: 1

Yaser Ali Peedikakkal
Yaser Ali Peedikakkal

Reputation: 396

This will solve your problem..

.wrapper {
  padding: 15px;
  background: #f0f0f0;
}
.block {
  width: 200px;
  height: 80px;
  padding: 25px;
  background: #fff;
  border-top-right-radius: 50px;
  border-top-left-radius: 50px;
}
<div class="wrapper">
  <div class="block">
    Your content goes here
  </div>
</div>

Upvotes: 0

Related Questions