Создание простых масок CSS: изображения в фигурных рамках

Демонстрация работы свойства внутренней тени и закругления рамки для создания фотографии с закругленными углами и рамкой из тени, адаптация примера из урока Dudley Storey, специально для сайта dejurka.ru

HTML

<p id="vignette">Golden Gate Bridge in fog</p>

CSS

p#vignette { 
        width: 500px; height: 188px;
        background-image: url(http://thenewcode.com/assets/images/golden-gate-bridge.jpg);
        border-radius: 50%;
        box-shadow: inset 0 0 60px rgba(0, 0, 0, 1);
        overflow: hidden;
        text-align: center;
        line-height: 180px;
        color: rgba(0, 0, 0, 0);
}