Rounding the Corners

With modern browsers gaining more and more market share, I feel like it is time to start taking a stronger stance with CSS3 stylings. That being said, I wanted to offer up a small snippet of CSS you can add to your styles to round the corners of your sections.

In style editing mode, click the Custom CSS tab and past the following into the window. 

.section { border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; }

This rounds the corners of your sections via CSS. It wont work in IE, it will however degrade gracefully, IE users will only see the original squared corners. You can change the values as long as they match, to say, 6px if you don’t want such a intense corner radius. You can also apply this to other elements like .journal-entry-wrapper, which would give all your entries a nice rounded background element.

Have fun.

Comments

[stephen]

Thanks, I can see many great ideas I can use this style-idea.

[Jason]

Cool tip, sure beats extra divs and needless background images!

At this point I couldn't care less if IE doesn't rounded corners, and this saves a ton of time. Thanks!

[Josh]

Nice tip. Everything you all do at Squarespace never ceases to amaze me. Thanks for all the hard work.

[joelle]

Hi Tyler,
Does this work on photos?
Love it!

[Jeremy]

Yes, Finally! Glad to see people moving forward. I'm tired of being stuck in css2 :)

[Adam Stacoviak]

We implemented a nice use of this technique when developing this site: http://teamautotransport.com/

But, I have one more declaration in my declaration block.

fx: .rounded { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }

Is there a reason why you didn't include this additional declaration in your CSS?

[Rick]

Thanks for such a nice tip. I will use this to improve page looking.

Rick
http://www.nymovingboxes.com/

[Adam]

I posted the code .section { -webkit-border-radius: 8px; -moz-border-radius: 8px; } into my css but my canvas corners are not rounded. Am I doing something wrong?

[Achim]

Same with me. How does this work exactly?

[Dan]

You have to apply it to the correct element. So if you want it applied to your canvas corners, you'd need to use the following in your custom CSS:

#canvasWrapper { border-radius: 3px; -webkit-border-radius: 8px; -moz-border-radius: 8px; }

Hope this helps.

[SS Luvah]

Nice bit and a tiny footprint!
For some reason i cannot seem to make the header rounded.
Is that an option?

[Dan Caplin]

can someone provide us with the code injection so we can round the canvas and canvas border?
looking to do this on threadshowroom..squarespace.com

[diggy]

I'm having trouble working out which section this is to round off the corners, does anyone have any idea, this is the only element that I can't seem to round off. http://emberapp.com/slooude/images/safari