Creating a curve using CSS

Question

I am trying to create a template like this one using CSS. I have created a div and used the following CSS code, which is looking like this-> http://jsfiddle.net/3kKkD/. But I don't know how to create the curve (I have pointed out in the image below)

Could you please show me how to do it?

Thanks

enter image description here

.container {
   width:75%;
   margin:0 auto; 
   margin-bottom:30px; 
   min-height:600px;
   background-color:#FFFFFF;
   -moz-box-shadow: 1px 1px 5px #999;
   -webkit-box-shadow: 1px 1px 5px #999;
   box-shadow: 1px 1px 5px #999;
}

<div class="container">My Template</div>

You can use an :after selector with display block, give it the same bg color as the orange and a border radius then just position it to sit where the curve should go :) — Kyle
– Kyle, Commented Oct 22, 2012 at 8:18
@Kyle Sevenoaks. I have tried this code .container:after { display;block; background-color:#F78E1E; border-radius: 10px; } But its not working. :( — black_belt
– black_belt, Commented Oct 22, 2012 at 15:38
Thanks for your reply. Please check this link jsfiddle.net/3kKkD/5 . I have managed to display a box, but cannot make it look like the template of the website I have mentioned above. Could you please help me? Thanks — black_belt
– black_belt, Commented Oct 22, 2012 at 16:01

TheITGuy · Accepted Answer · 2012-10-22 08:19:59Z

1

You will need to use border-radius.

border-radius: 10px;

Here is a decent guide

http://www.css3.info/preview/rounded-border/

answered Oct 22, 2012 at 8:19

TheITGuy

7225 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

black_belt Over a year ago

Thanks a lot for your reply. Using border-radius: 10px; is not solving my problem. It is just making the corners a bit round shaped.

TheITGuy Over a year ago

Isn't the rebounded corners on the top menus what you were referring to? Or am I misunderstanding?

Miqdad Ali · Accepted Answer · 2012-10-22 08:21:40Z

0

Here is a css border radius generator

http://border-radius.com/

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

answered Oct 22, 2012 at 8:21

Miqdad Ali

6,1577 gold badges34 silver badges50 bronze badges

Comments

GeoffreyB · Accepted Answer · 2012-10-22 08:22:21Z

0

The CSS property you're looking for is "border-radius".

-webkit-border-radius: 5px;
-moz-border-radius: 5px;

Read this to know more about this property.

answered Oct 22, 2012 at 8:22

GeoffreyB

1,8394 gold badges21 silver badges36 bronze badges

Collectives™ on Stack Overflow

Creating a curve using CSS

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related