Table of Contents
CSS allows you to do some pretty cool things to the design of your page.
One of the most useful things you can do is to add rounded corners to your elements.
In this post, we'll learn how to add rounded corners to elements using border-radius
in CSS.
How to add rounded corners to elements
First, let's start with the HTML for a simple box element:
HTML<div class="box">
This is a box
</div>
To show the background, we'll give it a background color, display it as an inline-block
and some padding:
CSS.box {
background-color: wheat;
padding: 1rem;
display: inline-block;
}
This is how it looks:
- HTML
- CSS
As you can see, without any rounded corners, the corners are right angles.
To make the corners rounded, we'll use the border-radius
property:
CSS.box {
background-color: wheat;
padding: 1rem;
display: inline-block;
border-radius: 1rem;
}
Here's how it looks:
- HTML
- CSS
The border-radius
property can take a single value which applies it to all corners, or you can specify a value for each corner using this syntax:
CSSborder-radius: top-left top-right bottom-right bottom-left;
Alternatively, you can specific the border radius for each individual corner by themselves:
CSSborder-top-left-radius: 1rem;
border-top-right-radius: 1rem;
border-bottom-right-radius: 1rem;
border-bottom-left-radius: 1rem;
As you can see, adding a border radius to your elements is very easy and powerful.
Conclusion
In this post, we learned how to add rounded corners to elements using border-radius
in CSS.
Simply add the border-radius
property to your elements and specify the radius you want.
Thanks for reading!
- How to Serve Static Files with Nginx and Docker
- How to deploy a .NET app using Docker
- Best Visual Studio Code Extensions for 2022
- How to deploy a Deno app using Docker
- How to deploy an Express app using Docker
- How to deploy a Node app using Docker
- Using Puppeteer and Jest for End-to-End Testing
- Getting User Location using JavaScript's Geolocation API
- Getting Started with React
- Getting Started with Vuex: Managing State in Vue
- Setting Up a Local Web Server using Node.js
- Using Axios to Pull Data from a REST API