CSS3 Border Radius Tutorial

Effective use of border-radius on some elements can remove the harshness of the square corners on some components.

Circle Element

In this example we’ll be creating a completely round circle object using nothing but css3. This is what our finished item will look like:

Source Code

To get this to work, what I’ve done is create a div and attached the .circle class to that div. I’ve then defined this .circle within my css file and given it a height and width of 100px. I’ve then added border-radius:100%; to this class which gives it the shape of a perfect circle.

<div class="circle"></div>

<style>
  .circle {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    background-color: #074e68;
    margin: auto;
  }
</style>

Circle Images

It’s important to note that the border-radius: 100%; property can be attached to <img> tags in order for them to take on a circular shape:

Source Code:

<img
  class="circle"
  src="https://images.tutorialedge.net/authors/profile.jpeg"
  alt="circle-image"
/>

<style>
  img.circle {
    width: 100px;
    height: 100px;
    border-radius: 100%;
    margin: auto;
  }
</style>

border-radius For Specific Corners

There are times where you don’t want every corner of your object to be rounded, thankfully we can utilize some of the more specific border-radius properties in order to allow us to only round certain corners. We can do this by setting the 4 specific properties:

border-top-left-radius: 5px;
border-top-right-radius: 10px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 30px;

or we can pass in 4 distinct parameters to our border-radius property like so:

border-radius: 10px 15px 20px 30px;

<div class="element"></div>

<style>
  .element {
    width: 100px;
    height: 100px;
    border-top-left-radius: 5px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 30px;
    background-color: #074e68;
    margin: auto;
  }
</style>

Output