In the last lesson we looked at how to add a border around an element. It all started when Aria tried to claim a section of the sofa and set her own boundary around her territory.
You may have noticed in all the examples, and if you have experimented with borders in your code, that all of the borders were rectangular.
Well I figured it was because you are basically putting a box around each element.
And boxes are square or rectangular.
It’s been ages since I’ve had a good box to sleep in.
You do love a good box.
More Fun Than The Toys That Came In It
By default, any border added with CSS will be rectangular or square depending on the size of the element. But, for a more modern look, you can customise the border so it has rounded edges.
Here are some examples ranging from a normal, rectangular border to a border with a slight curve to a border with well-rounded corners.
Here is the CSS property you need to change how rounded your border corners are:
border-radius:
The size of the radius is set by setting the value of this property to a number of pixels.
What does it mean by radius?
By using this property you are making your corners more rounded, more like a circle.
A radius is half the width of a circle so a larger radius gives you a bigger circle.
You make your balloon bigger by adding more air and this increases its radius.
A bigger balloon pushes on the corners of your border more and makes them more rounded.
Let’s take this paragraph element with its normal border:
CSS
.black-border {
border: 2px solid black;
padding: 5px;
}
HTML
<p class="black-border">Boxed up like some cat food.</p>
Boxed up like some cat food.
Some padding has been added just to make some space between the text and the edge of the border.
To change the border so it is slightly rounded, just add a small radius to the border. What is considered a small radius will generally depend on the size of your element, but in most cases up to 10px will have a fairly subtle border.
CSS
.black-border {
border: 2px solid black;
border-radius: 10px;
padding: 5px;
}
Boxed up like some cat food.
For more rounded corners, simply make the radius of your corners bigger. This is like inflating more air into your border balloons which makes them bigger and so your corners are more curved.
A radius of closer to 20px will be more obvious. Here is an example:
CSS
.black-border {
border: 2px solid black;
border-radius: 20px;
padding: 5px;
}
Boxed up like some cat food.
Depending on the size of your element, you can make the border around your element a complete circle if the value of your radius is big enough.
Let’s take the same paragraph element but define its size to make sure it is square. If the element isn’t square then your border won’t be a circle but more of an oval instead.
CSS
.black-border {
border: 2px solid black;
border-radius: 75px;
height: 150px;
width: 150px;
padding: 35px;
}
Boxed up like some cat food.
To make sure you have a circular element, make the border-radius at least half of your element width and height. That way you know the circles in each corner will meet.
As your corners become more rounded you may have to increased your padding so there is enough space for your text.
A rounded border is a nice way of making an image appear as a circle. This can be useful for a number of reasons including when adding a logo to your site.
Take this image for example:
Applying this CSS, for example, will make the image circular.
.rounded-img {
width: 200px
height: 200px;
border-radius: 100px;
}
There are rounded corners but you haven’t set a border.
How does that work?
By default every element has a border but it has no colour and so is invisible.
But you can use this to give an element rounded corners with less code.
But where is the rest of the image?
It’s hidden.
Remember, the border goes around your element and so it sets the outer edge of it.
By rounding the corners you are defining where the edge is and so any part of the picture which would be outside of this new edge is hidden.
Here we have made the border radius large enough that the circles in each corner of the border are large enough that they meet.
Using the border-radius property can really change how your website looks and it can help create a more modern look. Borders aren’t limited to just paragraphs and images, try experimenting with borders around divs and under headers.
Next we learn how to combine the border-radius property with a few other CSS properties to create links which look like stylish buttons.