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

[Xicom]

Great!! Working in Firefox very good but showing problem in IE.. Time to search a fix for IE :-)

[Spen]

How do you add this to a border around a gallery thumbnail which already uses the following CSS
.picture-gallery-list li {
float: left;
background: #111;
padding: 5px;
margin-left: 10px;
width: 150px;
}

.picture-gallery-list li a {
color: #fff;
}

Cheers

[JJStevens]

Hi, this isn't working for the navigation bar. I got it working on firebug but for some reason it appears that squarespace is blocking the CSS rules from being saved.

I tried:

#navigationBottom .horizontalNavigationBar

.horizontalNavigationBar

For selectors and also tried using !important with no success.

Should I give up?

Thanks,

John

[Aarron]

But what if rounded corners are a must when designing - across all browsers - even ie?

Sqaurespace doesnt support a custom header/footer before/after #content.

[Jonny Rowntree]

Great, works a treat.

Jonny
jonnyrowntree.com

[District]

Ok so I can round of my corners of my journal entry, but I can still see a white square.
The piece that is rounded off should be transparent !!

[Matt Spence]

Hi - I assume I can use this to round the corners of the comment area of a discussion. what would be the CSS element for this? #commentWrapper?

[Matt Spence]

Figured it out.
.comment,
.section { -webkit-border-radius: 8px; -moz-border-radius: 8px; }
Cheers

[John]

Does any body know the code for rounding the corners on the 'Page Links Section'?