HTML and CSS Reference
In-Depth Information
Figure 3.4. The “Latest Recipes” images with borders added
Rounded Corners
While we're fixing up the images in the “Latest Recipes” section, let's discuss how we can
easily add rounded corners to any element on the page. This is a technique that has, for a
long time, been carried out using images, extra HTML, JavaScript, and other overly complex
techniques.
For the RecipeFinder website, we won't need to add any rounded corners to our design, so
we'll use this as a temporary demonstration only. If we did want to add rounded corners to
each image, we could do so like this:
.media img {
float: left;
margin-right: 30px;
border: solid 9px #ede0d5;
border-radius: 20%;
}
And this would have the effect shown in
Figure 3.5
.
Figure 3.5. It's easy to add rounded corners with CSS
