For a home made border with corners around an image,
if the css should fit for each image
(without the width and height of the img in the css),
setting a (maximum) width is enough [1]
the rest can be done with the same universal css
as for a bordered box with known dimensions.
All images on this page have just the same html-code and the same css,
only the image (with its width and height) is put into the html.
[1] Notes
When all boxes can have the same width, this is a workaround for IE.
-
Can be used for IE only (as IE-hack or as a conditional comment), in addition to the {display:table} method for other browsers.
-
Can be used for all browsers together as well (as this page is illustrating).
-
For the smallest box: the fixed width is the width of the largest image to paste in the box, plus two times the width of the corners.
In case the page design does not allow boxes with the same width, but needs exactly
fitting borders and corners around images with different width, IE needs
some extra html.
Solution for IE: see next
page