0

I have a div containing an image. I want this div with rounded corners. The problem is the image inside the div is bigger than the div and i use overflow:hidden to cut the image because with jquery i reduce the size on mouseover, so now the div has rounded corners but i can see them only when i reduce the size of the image.

    .thumb{
       float: left;
       overflow: hidden;
       width: 230px;
       height: 230px;
       position: relative;
       margin-right: 1px;
       margin-bottom: 1px;
       border-radius: 12px;
    }
    .thumb img {
       max-width: 270px;
       height: 270px;
       left: -20px;
       position: relative;
       top: -20px;
       width: 270px;
       border-radius: 12px;
   }
Spudley
  • 166,037
  • 39
  • 233
  • 307
Frank
  • 141
  • 1
  • 9
  • 5
    Please create a demo on [jsFiddle](http://jsfiddle.net) to elaborate the issue. – Chris Aug 30 '12 at 18:23
  • Questions normally have a question mark. – Lee Taylor Aug 30 '12 at 18:40
  • do you want an image inside a div with rounded corners? is that what you're asking? – Matt K Aug 30 '12 at 18:54
  • have you added a width to the border? – jackJoe Aug 30 '12 at 19:14
  • I think you're looking is an inner-border solution: http://stackoverflow.com/questions/4839613/how-to-make-round-corners-to-both-inside-of-a-box-and-its-border – Maksim Vi. Aug 30 '12 at 19:17
  • Yes, i want an image inside a div with rounded corners, but the image is bigger than the rect area of the div so right now i cannot see any borders because the image is cutted of by the overflow:hidden of the div. – Frank Aug 31 '12 at 14:07

0 Answers0