Jump to content


Photo

Adding rounded corners to content area


  • Please log in to reply
6 replies to this topic

#1 nicosec

nicosec

    Member

  • Members
  • 11 posts

Posted 15 August 2011 - 01:33 AM

I am unable to successfully add rounded corners in the CSS to the content area of the page. If you look at http://www.ddftest.com/brant-secunda I would like the main white content area to have rounded edges. Please let me know which classes I should apply the border radius to.

#2 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 15 August 2011 - 01:55 AM

Have you tried adding them to the page-main id?

#3 nicosec

nicosec

    Member

  • Members
  • 11 posts

Posted 15 August 2011 - 06:39 AM

Yup, gave that a try and still no luck. Any other ideas? It appears that there are many div layers and I am thinking that the rounded corners may have to be applied to a number of divs. Here is what I have so far, which is still not working. /**Rounded Borders**/ #page-main, #dynamic-content, #texture, /*.texture*/ {border:1px solid white; border-radius: 5px; -moz-border-radius:5px;}

#4 Kate

Kate

    Advocate

  • Members
  • 3039 posts

Posted 15 August 2011 - 01:46 PM

Please replace your current code with this:
 #page-main{background:#ffffff;-moz-border-radius: 15px;border-radius: 15px;}
	#page-canvas{background:transparent !important;}


#5 nicosec

nicosec

    Member

  • Members
  • 11 posts

Posted 15 August 2011 - 11:16 PM

Kate, thanks for the help, but that did not do the trick. That just made the background disappear. Any other suggestions?

#6 kastelic

kastelic

    Advocate

  • Members

  • 3081 posts
  • Country: Country Flag

Posted 15 August 2011 - 11:45 PM

You will have to set #page-canvas to transparent (can be done in design control) and then add a white background to #page-main and round the corners, as Kate has described. Otherwise you wont see the corners. Perhaps there was a sytax error in your css, can you try inserting Kate's code again and then post back? Also, if you're on Chrome you will want to add -webkit-border-radius to the rule.

#7 nicosec

nicosec

    Member

  • Members
  • 11 posts

Posted 16 August 2011 - 04:26 AM

Thank you... That did the trick.