You are currently viewing Using CSS Border Radius Property to Create a Circle
  • Post category:CSS

Using CSS Border Radius Property to Create a Circle

CSS border radius Property to Create Circle

  • Introduction
  • What is CSS border radius
  • Create a circle
  • Quarter-circle and Semi-circle
  • Border radius values
  • Conclusion

Introduction:

  It is one of the style property in CSS and it helps to adjust the curves of your image or border. It’s mainly for client attraction and stylish. It is great powerful CSS border radius property, but can sometimes be a little bit confusing in the syntax. We know that every HTML element occupies a rectangle box on the browser window. You can observe the corners are straight.

What is CSS border radius:

  If you want to create HTML element having rounded corners to take help of CSS border-radius properties. The border-radius property allows me to round the corner. Select any one number is going to be used for all four corners. It was created mainly for client attraction and stylish. If you want a box with rounded corners without sharp edges, use border radius. A box has four corners: top left, top right, bottom left and bottom right. It can target all four separately. border radius can be mentioned separately just as border property can be mentioned separately.

When you set a border radius to a single value. All corners will be rounded by the same value. If it’s a static value like pixel you will always get a symmetrical corner. But if it’s a percentage the radius will be based on width and height of the element. You can also use corner specific properties like border top right they are equivalent but longer to type. By default border-radius will apply the same value to both horizontal and vertical radius but you can also add slash to value to separately control them Ex: border-radius : 100px/150px. We can add up to eight value with slash to create a complete shape. Using Mirko and Nils tools to make things easier you can just click and drag each point to control. Most of people border radius using for buttons and images.

READ ALSO  How to Make CSS Animate Background Color

We have a Div element with some height and width defined and what we would like to do is to style its corner. We can do this with the border radius property which allows us to add rounded corner to any element.

Create a circle

Circle {
width: 200px;
height: 200px;
background-color: red;
border-radius: 50%;
padding: 20px;
border: solid black 10px;
margin: 20px;
}

With the border radius property just for that we need to give a stronger value here actually this time let’s define another unit instead of pixels we can use percentage. When we give a minimum value of 50% or even more it completely round to corners from all sides. If we want to have an oval shape then we can add more height or more width to the element. One single value to the border radius property rounds all corners of the elements.

But actually they can also be added one by one for each corner there is also a shorthand to do that. First let me show you the regular rate so, let’s say we want around only the top left corners to do that let’s delete this first. We need to select the (border-top-left-radius) property and at 50% again which rounds only the top left corner of the box.

Quarter-circle and Semi-circle

Quarter-circle :

.Quarter-circle {
width: 300px;
height: 300px;
background-color: red;
border-top-left-radius: 100%;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; 
}

Semi-circle :

.Semi-circle {
width: 600px;
height: 300px;
background-color: red;
border-top-left-radius: 50% 100%;
border-top-right-radius: 50% 100%;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; 
}

  And you can create also semi-circle and quarter circle easily do it using this property. The best way to write the code is top here. First we can using simple methods of code to create quarter circle. Must follow these width and height are same value, you cannot increase or decrease the value of border top left radius its accurately value is 100%. Other three corners of border radius is 0. Run this code and you will see that Quarter-circle is created.

READ ALSO  How to Set Table Background Image in HTML

  Next is Semi-circle, it is create to follow these steps: The value of height should be only half the value of width. The top left and right border radius should be 50% 100%. Its actually means is the horizontal radius should be at 50% of width going to be 600 by two 300. A 100% out here this stands for vertical radius. You know this the horizontal radius have different values. If you keep one single value means you would want to both of them to be the same. A single value 50% means horizontal in vertically radius. In this case 50% of 600 is 300 I had a percent of height 300 & 300.

Border radius values:

.values{
border-radius: 20px 50% 0 50%;
}

  There are also other properties for top right, bottom right and bottom left corner. But defining them here one by one fills our class with many unnecessary texts. So, we can use the short end of it now if we define again the border radius property. We can define four values for each of the corners the first value is 20px for the top left corner. Second one for the top right corner is 50%, then comes the bottom right lets make it zero and the last one is for the bottom left let’s also make it 50%. Now you can run with any code editor, you can see the top left corner is slightly rounded the top right and the bottom left are rounded at the maximum value and the bottom right is third value here is not rounded .

Conclusion:

  The border radius property of CSS gives a nice flexibility to style our box shaped elements as circles , ovals and other kind of shapes. Guys, if you want to learn more about CSS and web development consider support my site.

Leave a Reply