Jump to content


Photo

CSS code for outline/border radius


  • Please log in to reply
5 replies to this topic

#1 davecfm

davecfm

    Super Member

  • Members
  • PipPipPipPip
  • 106 posts
  • Country: Country Flag

Posted 01 August 2011 - 03:46 AM

Hello, For the images in my boxes I have 5px radius'. I've added an outline/border to the images and am now looking to match that 5px radius. It seems to work fine in Firefox...not so hot in Crome. http://www.davec.fm/ My code so far: div.fboxgraphic img { border-radius: 5px; } div.fboxgraphic img { border:1px solid #999; } div.fboxgraphic img {********not working properly? border-style: radius 5px; } Thanks Dave

#2 Kate

Kate

    Advocate

  • Members
  • 3039 posts

Posted 01 August 2011 - 03:23 PM

Hi Dave, This link should help you out: http://www.css3.info...rounded-border/

#3 davecfm

davecfm

    Super Member

  • Members
  • PipPipPipPip
  • 106 posts
  • Country: Country Flag

Posted 01 August 2011 - 03:46 PM

Hi Kate, So I'm able to round the corners on the images correctly but what I'm having trouble with is rounding the corners on the border/ outline I added around the image. Like I said earlier, it looks fine with Firefox, but not with Chrome. http://www.davec.fm/ The corners on Chrome are void of anything. Thanks, Dave

#4 kastelic

kastelic

    Advocate

  • Members

  • 3081 posts
  • Country: Country Flag

Posted 01 August 2011 - 09:54 PM

Looks the same to me in both, are you talking about the home page or some other page?

#5 davecfm

davecfm

    Super Member

  • Members
  • PipPipPipPip
  • 106 posts
  • Country: Country Flag

Posted 01 August 2011 - 11:03 PM

Hi Kastelic, It was the home page. I removed the border after much frustration so you probably only saw the image radius with the following custom css: div.fboxgraphic img { border-radius: 5px; } I had a grey color border added to the image with this below: div.fboxgraphic img { border:1px solid #999; } I could not find the correct css to match the grey border to the image radius so I deleted it. I tried: div.fboxgraphic img { border-style: (inherit) (none) (radius 5px); } ...and many more layman variations. No luck. Any input would be appreciated. Dave

#6 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 13 August 2011 - 04:13 PM

Have you looked at this CSS?: http://www.zenelemen...ounded-corners/