创建没有边界半径的圆形块

Question

I create my own website and I can't understand how correctly create rounded block (see red rectangle in the picture here: https://dl.dropboxusercontent.com/u/43315655/planeto-template.jpg )

This block will be display at different screens (from 960 px to HD). I have tried to do with border-radius but it's wrong.

Please, help me with any links, advice or code examples :)

Answer 1

The image you posted is an HTML template. If they did it, don'T you think it is possible?

It is, just put a border on bottom left and bottom right. One value is 100% and the other is the height you want the curve to stop :

border-bottom-right-radius : 100% 100px;
border-bottom-left-radius : 100% 100px;

Fiddle : http://jsfiddle.net/yqf9a/1/

Answer 2

I'm not quite sure what you don't understand about border-radius, but the W3C Wiki explains the use of the border-radius property pretty good: http://www.w3schools.com/cssref/css3_pr_border-radius.asp

Also try the CSS Border Radius Generator: http://border-radius.com/