Как можно сделать прямоугольник с таким закруглением?

Question

[Александр]

Добрый день, подскажите как проще и грамотнее сделать такое ?
https://yadi.sk/i/TPzJPQZfvk3QV

Answer 1

[Ivanq]

.rect {
  width: 200px;
  height: 100px;
  border: 1px dashed gray;
  border-radius: 50px;
}

border - рамка
border-radius - скругление

Answer 2

[Ivan Ukhov]

.box {
width: 100px;
height: 50px;
border: 1px solid #000;
border-radius: 30px;
}

Comments

[Александр]

Если размер прямоугольника 1200px ? Такой вариант не прокатит

[Ivan Ukhov]

Ну тогда вместо 30px поиграться с "%"

[Ivanq]

Александр:

width: 1200px; /* ширина */
height: 600px; /* высота */

[Ivanq]

Александр Вместо 30px можно взять половину высоты. Если использовать 50%, то прямоугольник превратится в овал.

[Александр]

ну да, вот из за процентов я и не понял почему такой овал происходит, что с px даже не попробовал )

Answer 3

[Евгений]

Как-то так:
https://jsfiddle.net/kb6kvfq8/
Высоту делим на 2 получаем радиус закругления