Round corners

(just starting, not finished)

Fixed width, variable height

For fixed width blocks, we can get away by breaking down the block into 3 parts:

  • top
  • center
  • bottom

The top and bottom part contain rounded corners and have no content. The center part is rectangular and has all of the content.

Variable width, variable height

(to be written)

One image for all 4 corners

Sometimes one image is used as source for all 4 corners, like this one:

 

We can break this image down into 4 pieces: the 4 corners:

  • top-left (tl)
  • top-right (tr)
  • bottom-left (bl)
  • bottom-right (br)

Each piece goes into a absolute positioned div, and all 4 divs go into a containing relative positioned div. Let's say the image is 64x64 pixels, so that the corners are each 32x32 pixels.

The get the piece of the image we are interested in, we use a technique called clipping. There is a clip property in CSS, that accepts 4 numbers: top, right, bottom and left (in that order). Each number specifies how deep the cut is measured from the edge.

For example, if we want the top-left corner, we have to cut 32 pixels from the right:

and 32 pixels from the bottom:

Now we have the top-left corner isolated.

The CSS code for this would be

clip: rect(auto, 32px, 32px, auto);

Here are the 4 corners without clipping:

Now clipping is done for the top-left corner like described earlier:

Now for all corners:

The CSS code for this:

.container {
   position:relative;
   width:200px;
   height:200px;
}
.tl, .tr, .bl, .br {
   position:absolute;
   background-image: url('corners.png');
   width:64px;
   height:64px;
}
.tl {
   top:0;
   left:0;
   clip:rect(auto,32px,32px,auto);
}
.tr {
   top:0;
   right:0;
   clip:rect(auto,auto,32px,32px);
}
.bl {
   bottom:0;
   left:0;
   clip:rect(32px,32px,auto,auto);
}
.br {
   bottom:0;
   right:0;
   clip:rect(32px,auto,auto,32px);
}

The HTML code:

<html><head><title>Test</title>
<link type="text/css" rel="stylesheet" media="all" href="style.css" />
</head><body>
<div class="container">
<div class="tl"></div>
<div class="tr"></div>
<div class="bl"></div>
<div class="br"></div>
</div>
</body>
</html>

Now we need something for the edges. We can identify these as:

  • top-center (tc)
  • center-left (cl)
  • center-right (cr)
  • bottom-center (bc)

(to be continued)