Блок с тенью



Высокая сложность

Сделайте блок, показанный на рис. 1. Блок содержит скругления в заголовке и внизу блока. Вокруг блока тёмно-зелёная рамка и тень. Длина заголовка может меняться, соответственно, должна изменяться и ширина блока под ним, но при этом не превышать 250px.

Рис. 1

Необходимо соблюсти следующие условия.

  • Валидная вёрстка на HTML5.
  • Валидность CSS не важна.
  • Таблицы и их имитация через стили не применяются.
  • Уголки имеют фиксированный размер, ширина и высота уголков одинакова, задаётся в пикселах.
  • Корректное отображение в браузерах IE9+, Opera 12+, Firefox 6+, Safari 5.1, Chrome 12+.
  • Допустимы незначительные отклонения от макета при отображении в разных браузерах.
  • Блок «резиновый», т.е. тянется по ширине окна браузера.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.