20.04.2017 08:06

CSS3 Border Radius Tutorial

Author: Elliot Forbes | @Elliot_F

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:

circle-image

Source Code:

<img class="circle" src="https://twitter.com/Elliot_F/profile_image?size=original" 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

See A Problem?

See something wrong with this page? Feel free to submit a pull request and help improve the development community!

Github