Thursday: Selectively Radiusing Borders

For this week's coding challenge, you will notice that the background colors are irregularly shaped. This is done by defining the radius of each corner independently of the other corners. There is a good summary for how to do this on W3Schools, but we will also work through them in class.

In brief, instead of simply coding border-radius you can code border-top-left-radius to apply a style just to that one corner of the box. Each corner may be specified in this manner. And no, you don't need to have a border to apply a radius to it, though that seems odd. A border radius would certainly be applied to any border you add, but even without that border the box beneath the border must radius in exactly the same way or it would end up looking like a broken image.

Once you code the border radii for this week's coding challenge, try applying this to your main.css. Pick something in there (like your header) that would look better with a background color and then apply a radius to one or more corner of that box.