Tech Hive

I’ve found numerous tutorials on how to make resizable corners but they are mostly limiting because they do expand downwards but none of them were able to show me how to make those corners expand horizontally. Now that was a problem for me because when I was tasked to code a PSD design, I had to make sure that the boxes with rounded corners are scalable and not only vertically but horizontally as well. The reason being the whole site is set in em, just like this blog.

I searched and searched, found nothing, but there was a lot of tutorials so I just put things together and am I glad that it worked!

Let’s Start!

It’s fairly easy to do but it would entail the use of a lot of div so it will scale on any direction. I couldn’t think of a better way to do it, until browsers are not capable of having multiple background images in a single div or any container for that matter, we will have to make use of excess divs.

Let’s go to the markup:

<div class="container">
  <div class="top-left">
    <div class="top-right">
      <div class="bottom-left">
        <div class="bottom-right">
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        </div>
      </div>
    </div>
  </div>
</div>

Explanation:

• Container = This will contain the overall background color for this bucket
• Top-left = Obviously, this will contain the top left corner, the corner should NOT be transparent because colors will seep through
• Top-right = This will contain the top-right corner, again, do NOT make this transparent
• Bottom-left = The bottom-left corner, that is if you are doing rounded corners on all sides, otherwise, you may take this out
• Bottom-right = The bottom-right corner, again, do NOT make this transparent.

Now that we understand where one goes, let’s style ‘em!

.container {
  width: 20em;
  background: #fcfcb2 URL(images/sample-bg.jpg) top repeat-x;
  margin:3em auto 0 auto;
}
.top-left {
  background: URL(images/top-left.jpg) top left no-repeat;
}
.top-right {
  background: URL(images/top-right.jpg) top right no-repeat;
}
.bottom-left {
  background: URL(images/bottom-left.jpg) bottom left no-repeat;
}
.bottom-right  {
  background: URL(images/bottom-right.jpg) bottom right no-repeat;
  padding: 1em;
}

NOTE:

Personally, I find it easier to name my images the same name I’d give to the div, that way, I don’t have to worry about which image should go where. It eliminates my having to go to my images folder and locate the image that should be in the div. It saves me a couple of seconds but it adds up so I’d like assume that I save a lot of time.

For the sake of being clear, I decided to separate container from top-left, in reality, if you’re only using a background color for the box (meaning you do not have any patterns or you do not have to add any background image to the box), you can eliminate the div class="container" and proceed with top-left right away. Just don’t forget to add the background color for the container.

Explanation:

• Container

  I stated the width in em because I believe it is so much better than percentage. You, the designer will be able to state the actual width of the container but also you give your audience the chance to change your default width if they think the font is too small or too big. In percentage the width of what you’re doing depends entirely on the width of the user’s screen size, thus if the user’s screen is too wide, the design will be stretched as well as the text thus slowing their reading speed down. The con that I can see in using em is that if the user is not so tech savvy and that it is not very obvious that it is resizable.

  As you can see, I put a color in the background since it is the parent div, the succeeding divs will have to use that background color so even if we’re using little images for the corner, it will not be obvious. Plus, if the user chose to turn off images, the content will still be in a container, a square/rectangle one.

  If you want to put margins around your rounded cornered box, you will have to declare that in the container class because it is the outermost div, the corners inside it will not be affected.

• Top-left, top-right, bottom-left, bottom-right

  Well this is pretty simple because you only have to state the background for each div. For the positioning (the left/top/bottom/right), it’s pretty obvious where what goes, top-left.jpg goes to the top left corner of the box, so on and so forth. You have to put no-repeat, obviously so the background image will not repeat.

  Bottom-right class has an additional declaration if you’d notice, it has padding. The padding adds space between the corners and the content itself. You have to put padding at the very last div because if not, the corners will not be aligned with each other.

  Here’s an example of what we were able to do. I made 2 rounded corners there, one is the box-type and the other one is the rounded corners at the top only.

Here are several examples I made so you would be able to see what this looks like.

You can experiment using this technique, e.g. bottom rounded corners only, add a pattern background in a box–type rounded corners.