ISTA 230 Introduction to Web Design (Spring 2017)

Rounded Corners


Download the exercise files found here. Rounded corners is something that is not natively available in CSS 2.1 but is commonly desired.

Using your understanding of background properties, use nine 'div' elements to create a dynamic box with rounded corners. In other words, you should be able to adjust the width and height of your content without 'breaking' the box.


This technique is a difficult one. The general idea is that you have a 'div' element which contains all of the other elements. Then you'll create three nested 'div' elements for the top part of the box, three more nested 'div' elements for the middle of the box, and three more 'div' elements for the bottom of the box. For some guidance, review the 'sliding doors' technique described in lecture.

Feel free to use your own images for the rounded corners instead of those provided. Just be sure that the width of your top-left background image, your middle-left background-image, and your bottom-left background image all have the same width as one another. You'll also want to make sure that your top-right, middle-right, and bottom-right images are all the same width as one another, that your top-left, top-middle, and top-right images are all the same height as one another, and that your bottom-left, bottom-middle, and bottom-right images are all the same height as one another.


Solution can be downloaded here.