CODEWITHSUNDEEP
htmlcss
Shailender Arora
Shailender Arora

Reputation: 7778

how to make css curve box with gradient & shadow

I am trying to make the css curve box with gradient and shadow as well as. so how i can make with pure css and it should be only in one div not much code.

For reference see the attached image:-

enter image description here

Upvotes: 0

Views: 1595

Answers (1)

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32202

you just make is border-radius as like this

Css

div {
width:200px;
margin:auto;
margin-top:20px;
height:200px;
background:red;
border-radius:25px;
box-shadow: inset 0 0 15px rgba(68,68,68,0.8);;
position:relative;
}

div:beforae {
content:"";
position:absolute;
border-left:15px solid blue; 
border-right:15px solid green;
height:200px; 
border-radius:15px 0 0 15px;   
}
​

HTML

<div></div>​

and now check to live demo http://jsfiddle.net/rohitazad/Vsvg2/74/

Upvotes: 2

Related Questions