francky's

liquid corners playgarden

some illustrations of the method
"liquid round corners"
with an adapted stylesheet

9. The Image Inside

(b) equal width workaround - for IE only or for all browsers
see notes

 

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.


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
 

 

Valid HTML 4.01 Transitional

Valid CSS