View Full Version : div overflow hidden for images possible?

12-27-2010, 03:34 AM
I'm trying to make a div tag with rounded corners to place images in for a gallery. But when I apply the overflow to "hidden" it doesn't hide the corners.

Still learning the ins and outs of style sheets, so maybe I'm missing something simple, but I don't know what.


12-27-2010, 04:08 AM
I'm assuming you're using border-radius or whatever. I don't have much experience with this... because I see no reason to use it until it's standard throughout 99% of web browsers people use. In the meantime, a sure fire way for you to solve this problem is to add position:relative; or position:absolute; to the div containing the image and then add 4 divs with position:absolute; to the container div to imitate the 4 rounded corners... that is, if you're not using a complex background around the container.

12-27-2010, 09:58 AM
Hello turpentyne,
Many times a containing div is just extra markup. If you put the rounded corners on the image itself then you don't need to worry about your div overflowing.

Look at this example -
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #000;
background: #fc6;
/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {display: block;}
section {
width: 800px;
margin: 30px auto;
padding: 50px;
background: #999;
img {
height: 150px;
width: 150px;
-moz-border-radius: 15px;
border-radius: 15px;

<img src="backall.jpg" alt="img" />