The best CSS rounded corners method

I love this example :

Even More CSS Roudned Corners 2

Project Home

Basic Example

The HTML is simple

<div class="dialog"><div class="content"><div class="t"></div>
  <!-- Your content goes here -->
</div><div class="b"><div></div></div></div>

The Css is excellent

  -- Even more rounded corners with CSS: Base stylesheet --

.dialog {
 margin:0px auto;
 max-width:760px; /* based on image dimensions - not quite consistent with drip styles yet */
 margin-left:12px; /* default, width of left corner */
 margin-bottom:0.5em; /* spacing under dialog */

.dialog .content,
.dialog .t,
.dialog .b,
.dialog .b div {
 background:transparent url(dialog2-blue-800x1600.png) no-repeat top right;

.dialog .content {
 padding:0px 12px 0px 0px;

.dialog .t {
 /* top+left vertical slice */
 width:12px; /* top slice width */
 _height:1600px; /* arbitrary long height, IE 6 */
 background-position:top left;

.dialog .b {
 /* bottom */

.dialog .b,
.dialog .b div {
 height:30px; /* height of bottom cap/shade */

.dialog .b {
 background-position:bottom right;

.dialog .b div {
 width:12px; /* bottom corner width */
 background-position:bottom left;

.dialog .hd,
.dialog .bd,
.dialog .ft {

.dialog .wrapper {
 /* extra content protector - preventing vertical overflow (past background) */
 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. */

.dialog h1,
.dialog p {
 margin:0px; /* margins will blow out backgrounds, leaving whitespace. */
 padding:0.5em 0px 0.5em 0px;

.dialog h1 {
Author Paul Hayman

Paul is the COO of kwiboo ltd and has more than 20 years IT consultancy experience. He has consulted for a number of blue chip companies and has been exposed to the folowing sectors: Utilities, Telecommunications, Insurance, Media, Investment Banking, Leisure, Legal, CRM, Pharmaceuticals, Interactive Gaming, Mobile Communications, Online Services.

Paul is the COO and co-founder of kwiboo ( and is also the creator of GeekZilla.


Anwar said:

i want to start background image from left to right, currently its right to left. Please help...

25/Sep/2012 07:45 AM

Add Comment


Your comment has been received and will be shown once it passes moderation.