CSS Rounded Corners for HTML Elements – POFTUT

CSS Rounded Corners for HTML Elements

The CSS provides border-radius attribute in order to define, shape, round the corners of the HTML elements. This attribute is created in 2005 and gained widespread usage amongst web developers which provides easy styling for different elements.

border-radius Attribute

border-radius attribute is a very flexible attribute where it accepts different count of parameters. border-radius attribute can accept one two, three and four parameters where each of them has a different meaning.

Round with Single Value

We will start with a single value example where the provided value will be applied to all four corners. In this example, we will apply the border-radius as 15 pixels with 15 px like below.

Round with Single Value

Round with Single Value

Round with Two Value

We can also use two parameters here the first parameter is used for the top-left and bottom-right corners and the second value will be used for top-right and bottom-left corners.

Round with Two Value

Round with Two Value

Round with Three Value

We can use three values that will be used to set border-radius. The first value will be used to set top-left, the second value for top-right and bottom-left corners and third value will set the bottom-right corner.

LEARN MORE  Hiding Scroll Bar for Internet Explorer, Chrome, Firefox

Round with Three Value

Round with Three Value

Round with Four Value

We can also provide four values where each of them will be used for a single corner. First value will be for the top-left corner, the second value will be for the top-right corner, the third corner will be for bottom-right corner and the forth corner will be for bottom-left corner.

Round with Four Value

Round with Four Value

Round with Pixel Value

While rounding corners of the HTML elements we generally use pixels as parameter or size unit. Pixel is defined with the px after the size like below.

LEARN MORE  HTML Bold Tag Usage and Examples

Round with Percentage Value

We can also use other unit types like a percentage in order to specify the round size. We will use the percentage sign % and provide the percentage of the axis for the corner.

Round with Percentage Value

Round with Percentage Value

Round Top Left Corner

We can also specifically set the corner we want to round. If we want to round the top left corner we can use border-top-left-radius CSS attribute like below.

Round Top Left Corner

Round Top Left Corner

Round Top Right Corner

If we want to round the top right corner we can use border-top-right-radius CSS attribute like below.

LEARN MORE  How To Change Font Color with CSS in HTML?

Round Top Right Corner

Round Top Right Corner

Round Bottom Left Corner

If we want to round the bottom left corner we can use border-bottom-left-radius CSS attribute like below.

Round Bottom Left Corner

Round Bottom Left Corner

Round Bottom Right Corner

If we want to round the bottom right corner we can use border-bottom-right-radius CSS attribute like below.

Round Bottom Right Corner

Round Bottom Right Corner

Leave a Reply

Your email address will not be published. Required fields are marked *

Enjoy this blog? Please spread the word :)