Рамки для изображений на CSS3

Используя в полной мере возможности CSS3, можно оперировать не только привычными параметрами, но и указывать положение и толщину дополнительных рамок элемента. Само по себе изображение рамки не представляет особого интереса, в то время как, эта же рамка вокруг изображения, смотрится очень симпатично.



Пример 1:

pxuket


Пример 2:


В такую же рамку можно вставить любой другой элемент HTML, например, текст:

CSS3 makes it possible to specify an image as an element's border, instead of just a solid color. While on the surface this doesn't seem particularly interesting, the way the property works makes it more than that which meets the eye. The border-image property lets you specify a single image for the purpose and then slices that image to create the desired border effect. Yes, CSS is slicing now. border-image is currently supported in all the modern browsers to various degrees except IE (as of IE9).



Пример 3: