Tag Archives: Make CSS Rounded Corners

Make CSS Rounded Corners

While you’d be hard-pressed to come up with any single design tic that defines that coveted Web 2.0 aesthetic, nothing screams “I’m a hip blogger” quite like rounded corners. We’re not sure how the trend started, but even now as rounded corners have largely jumped the shark, clients still clamor for them.

Not surprisingly, there are literally dozens of ways to create the rounded corner look. Your options range from the very primitive (just create static backgrounds in Photoshop and apply them on a per-element basis) to the very progressive — CSS 3 can do rounded corners with just one line of code.

Unfortunately, not all browsers support CSS 3. So, unless you’re doing a fun site for your own experimentation, you’re going to have to resort to one of the more traditional workarounds.

We decided to dig through the many options for creating rounded corner elements and came up with a few winners that stand out from the bunch. These methods offer the best balance between simplicity and valid, semantic markup (for the most part) while keeping the images to a minimum. Not only do these methods adhere to proper web standards, but they’ll keep page load times down, too.

The options here range from pure CSS to JavaScript-based solutions, hopefully offering something for everyone.

 

The pure CSS method

There are a couple of ways to do rounded corners using just CSS and a background image. The trick is to use one or several images larger than the largest element you want a box around and then position them using the background-image property.

Our favorite method, created by designer Scott Schiller, is known by the sexy moniker, Even More Rounded Corners With CSS. It allows for fluid rounded corner dialogs and supports borders, alpha transparency, gradients and patterns.

Here’s what the most basic HTML looks like:

01 <div class="dialog">
02
03     <div class="content">
04
05         <div class="t"></div>
06
07
08
09         <!-- Your content goes here -->
10
11     </div>
12
13     <div class="b">
14
15         <div></div>
16
17     </div>
18
19 </div>

Then you can apply your styles. Pay particular attention to Schiller’s inline comments, which highlight some of the trickier parts:

001 .dialog {
002
003     position:relative;
004
005     margin:0px auto;
006
007     min-width:8em;
008
009     max-width:760px; /* based on image dimensions */
010
011     color:#fff;
012
013     z-index:1;
014
015     margin-left:12px; /* default, width of left corner */
016
017     margin-bottom:0.5em; /* spacing under dialog */
018
019 }
020
021
022
023 .dialog .content,
024
025 .dialog .t,
026
027 .dialog .b,
028
029 .dialog .b div {
030
031     background:transparent url(my-image.png) no-repeat top right;
032
033     _background-image:url(dialog2-blue.gif);
034
035 }
036
037
038
039 .dialog .content {
040
041     position:relative;
042
043     zoom:1;
044
045     _overflow-y:hidden;
046
047     padding:0px 12px 0px 0px;
048
049 }
050
051
052
053 .dialog .t {
054
055     /* top+left vertical slice */
056
057     position:absolute;
058
059     left:0px;
060
061     top:0px;
062
063     width:12px; /* top slice width */
064
065     margin-left:-12px;
066
067     height:100%;
068
069     _height:1600px; /* arbitrary long height, IE 6 */
070
071     background-position:top left;
072
073 }
074
075
076
077 .dialog .b {
078
079     /* bottom */
080
081     position:relative;
082
083     width:100%;
084
085 }
086
087
088
089 .dialog .b,
090
091 .dialog .b div {
092
093     height:30px; /* height of bottom cap/shade */
094
095     font-size:1px;
096
097 }
098
099
100
101 .dialog .b {
102
103     background-position:bottom right;
104
105 }
106
107
108
109 .dialog .b div {
110
111     position:relative;
112
113     width:12px; /* bottom corner width */
114
115     margin-left:-12px;
116
117     background-position:bottom left;
118
119 }
120
121
122
123 .dialog .hd,
124
125 .dialog .bd,
126
127 .dialog .ft {
128
129     position:relative;
130
131 }
132
133
134
135 .dialog .wrapper {
136
137     /* extra content protector - preventing vertical overflow (past background) */
138
139     position:static;
140
141     max-height:1000px;
142
143     overflow:auto; /* note that overflow:auto causes a rather annoying redraw "lag" in Firefox 2, and may degrade performance. Might be worth trying without if you aren't worried about height/overflow issues. */
144
145 }
146
147
148
149 .dialog h1,
150
151 .dialog p {
152
153     margin:0px; /* margins will blow out backgrounds, leaving whitespace. */
154
155     padding:0.5em 0px 0.5em 0px;
156
157 }
158
159
160
161 .dialog h1 {
162
163     padding-bottom:0px;
164
165 }

As you can see, the CSS is far from simple, but if you’re looking for a solution that allows complex stuff like alpha transparency and gradient images, the CSS is naturally going to get a bit tricky.

Have look at Schiller’s example page to see these techniques in action.

The main downside to this particular method is that you end up with a bit of non-semantic markup — specifically the three divs that, in a perfect world, shouldn’t be there. If that bothers you, there are other somewhat less robust methods to achieve rounded corners using just CSS.

Another method we’ve used is SpiffyCorners, though it too uses a bit of semantically-questionable markup.

There’s also the ever popular “ThrashBox” method with is more semantic, but uses more images to achieve its effects.

 

Use JavaScript

There are quite a few JavaScript libraries that can quench your thirst for rounded corners. It always hard to pick a favorite, but we settled on curvyCorners because it’s relatively lightweight, requires almost no effort on your part and has a very slick JQuery plugin.

To use curvyCorners, just head over to the site and download the latest version. Then upload that file to your site and include the script in your page’s head tags:

1 <script type="text/JavaScript" src="rounded_corners.js" />

Once you’ve got curvyCorners loading, it will automatically round any specified div tags; the only thing you need to do is call the script and set a few options. Here’s some sample code:

01 <script type="text/JavaScript">
02
03
04
05   window.onload = function()
06
07   {
08
09     settings = {
10
11       tl: { radius: 10 },
12
13       tr: { radius: 10 },
14
15       bl: { radius: 10 },
16
17       br: { radius: 10 },
18
19       antiAlias: true,
20
21       autoPad: false
22
23     }
24
25
26
27     var divObj = document.getElementById("myDiv");
28
29
30
31     var cornersObj = new curvyCorners(settings, divObj);
32
33     cornersObj.applyCornersToAll();
34
35   }
36
37
38
39 </script>

Notice that we’ve set the round radius to 10 pixels and applied it the a div with the id “myDiv.” Just replace myDiv with the names of the divs you want to round and you’re all set. For more details, and some examples, be sure to check out the curvyCorners site.

CurvyCorners gives you rounded corners with very little effort and doesn’t rely on large images with tricky CSS. It does, however, require JavaScript. Unfortunately, your pages will fall apart for users that have it turned off.

 

CSS 3, A Rounded Corners Revolution

As you have probably figured out right now, creating rounded corners requires some amount of compromise — whether you choose bulky XHTML or JavaScript as a workaround. But the future is looking quite bright.

CSS 3 makes creating rounded corners dead simple, only one line of code necessary:

1 border-radius: 10px;

It’s a revelation! Of course, only a handful of browsers currently support border-radius, which means for most sites it isn’t a viable option.

Note: See our guide, Get Started with CSS 3, for more details on how to create rounded corners and more using CSS 3.

But it should give you some comfort to know that someday, in a galaxy far, far away, rounded corners will be easy. Like, one-line-of-freaking-code easy.

Make CSS Rounded Corners

While you’d be hard-pressed to come up with any single design tic that defines that coveted Web 2.0 aesthetic, nothing screams “I’m a hip blogger” quite like rounded corners. We’re not sure how the trend started, but even now as rounded corners have largely jumped the shark, clients still clamor for them.

Not surprisingly, there are literally dozens of ways to create the rounded corner look. Your options range from the very primitive (just create static backgrounds in Photoshop and apply them on a per-element basis) to the very progressive — CSS 3 can do rounded corners with just one line of code.

Unfortunately, not all browsers support CSS 3. So, unless you’re doing a fun site for your own experimentation, you’re going to have to resort to one of the more traditional workarounds.

We decided to dig through the many options for creating rounded corner elements and came up with a few winners that stand out from the bunch. These methods offer the best balance between simplicity and valid, semantic markup (for the most part) while keeping the images to a minimum. Not only do these methods adhere to proper web standards, but they’ll keep page load times down, too.

The options here range from pure CSS to JavaScript-based solutions, hopefully offering something for everyone.

 

The pure CSS method

There are a couple of ways to do rounded corners using just CSS and a background image. The trick is to use one or several images larger than the largest element you want a box around and then position them using the background-image property.

Our favorite method, created by designer Scott Schiller, is known by the sexy moniker, Even More Rounded Corners With CSS. It allows for fluid rounded corner dialogs and supports borders, alpha transparency, gradients and patterns.

Here’s what the most basic HTML looks like:

01 <div class="dialog">
02
03     <div class="content">
04
05         <div class="t"></div>
06
07
08
09         <!-- Your content goes here -->
10
11     </div>
12
13     <div class="b">
14
15         <div></div>
16
17     </div>
18
19 </div>

Then you can apply your styles. Pay particular attention to Schiller’s inline comments, which highlight some of the trickier parts:

001 .dialog {
002
003     position:relative;
004
005     margin:0px auto;
006
007     min-width:8em;
008
009     max-width:760px; /* based on image dimensions */
010
011     color:#fff;
012
013     z-index:1;
014
015     margin-left:12px; /* default, width of left corner */
016
017     margin-bottom:0.5em; /* spacing under dialog */
018
019 }
020
021
022
023 .dialog .content,
024
025 .dialog .t,
026
027 .dialog .b,
028
029 .dialog .b div {
030
031     background:transparent url(my-image.png) no-repeat top right;
032
033     _background-image:url(dialog2-blue.gif);
034
035 }
036
037
038
039 .dialog .content {
040
041     position:relative;
042
043     zoom:1;
044
045     _overflow-y:hidden;
046
047     padding:0px 12px 0px 0px;
048
049 }
050
051
052
053 .dialog .t {
054
055     /* top+left vertical slice */
056
057     position:absolute;
058
059     left:0px;
060
061     top:0px;
062
063     width:12px; /* top slice width */
064
065     margin-left:-12px;
066
067     height:100%;
068
069     _height:1600px; /* arbitrary long height, IE 6 */
070
071     background-position:top left;
072
073 }
074
075
076
077 .dialog .b {
078
079     /* bottom */
080
081     position:relative;
082
083     width:100%;
084
085 }
086
087
088
089 .dialog .b,
090
091 .dialog .b div {
092
093     height:30px; /* height of bottom cap/shade */
094
095     font-size:1px;
096
097 }
098
099
100
101 .dialog .b {
102
103     background-position:bottom right;
104
105 }
106
107
108
109 .dialog .b div {
110
111     position:relative;
112
113     width:12px; /* bottom corner width */
114
115     margin-left:-12px;
116
117     background-position:bottom left;
118
119 }
120
121
122
123 .dialog .hd,
124
125 .dialog .bd,
126
127 .dialog .ft {
128
129     position:relative;
130
131 }
132
133
134
135 .dialog .wrapper {
136
137     /* extra content protector - preventing vertical overflow (past background) */
138
139     position:static;
140
141     max-height:1000px;
142
143     overflow:auto; /* note that overflow:auto causes a rather annoying redraw "lag" in Firefox 2, and may degrade performance. Might be worth trying without if you aren't worried about height/overflow issues. */
144
145 }
146
147
148
149 .dialog h1,
150
151 .dialog p {
152
153     margin:0px; /* margins will blow out backgrounds, leaving whitespace. */
154
155     padding:0.5em 0px 0.5em 0px;
156
157 }
158
159
160
161 .dialog h1 {
162
163     padding-bottom:0px;
164
165 }

As you can see, the CSS is far from simple, but if you’re looking for a solution that allows complex stuff like alpha transparency and gradient images, the CSS is naturally going to get a bit tricky.

Have look at Schiller’s example page to see these techniques in action.

The main downside to this particular method is that you end up with a bit of non-semantic markup — specifically the three divs that, in a perfect world, shouldn’t be there. If that bothers you, there are other somewhat less robust methods to achieve rounded corners using just CSS.

Another method we’ve used is SpiffyCorners, though it too uses a bit of semantically-questionable markup.

There’s also the ever popular “ThrashBox” method with is more semantic, but uses more images to achieve its effects.

 

Use JavaScript

There are quite a few JavaScript libraries that can quench your thirst for rounded corners. It always hard to pick a favorite, but we settled on curvyCorners because it’s relatively lightweight, requires almost no effort on your part and has a very slick JQuery plugin.

To use curvyCorners, just head over to the site and download the latest version. Then upload that file to your site and include the script in your page’s head tags:

1 <script type="text/JavaScript" src="rounded_corners.js" />

Once you’ve got curvyCorners loading, it will automatically round any specified div tags; the only thing you need to do is call the script and set a few options. Here’s some sample code:

01 <script type="text/JavaScript">
02
03
04
05   window.onload = function()
06
07   {
08
09     settings = {
10
11       tl: { radius: 10 },
12
13       tr: { radius: 10 },
14
15       bl: { radius: 10 },
16
17       br: { radius: 10 },
18
19       antiAlias: true,
20
21       autoPad: false
22
23     }
24
25
26
27     var divObj = document.getElementById("myDiv");
28
29
30
31     var cornersObj = new curvyCorners(settings, divObj);
32
33     cornersObj.applyCornersToAll();
34
35   }
36
37
38
39 </script>

Notice that we’ve set the round radius to 10 pixels and applied it the a div with the id “myDiv.” Just replace myDiv with the names of the divs you want to round and you’re all set. For more details, and some examples, be sure to check out the curvyCorners site.

CurvyCorners gives you rounded corners with very little effort and doesn’t rely on large images with tricky CSS. It does, however, require JavaScript. Unfortunately, your pages will fall apart for users that have it turned off.

 

CSS 3, A Rounded Corners Revolution

As you have probably figured out right now, creating rounded corners requires some amount of compromise — whether you choose bulky XHTML or JavaScript as a workaround. But the future is looking quite bright.

CSS 3 makes creating rounded corners dead simple, only one line of code necessary:

1 border-radius: 10px;

It’s a revelation! Of course, only a handful of browsers currently support border-radius, which means for most sites it isn’t a viable option.

Note: See our guide, Get Started with CSS 3, for more details on how to create rounded corners and more using CSS 3.

But it should give you some comfort to know that someday, in a galaxy far, far away, rounded corners will be easy. Like, one-line-of-freaking-code easy.