CSS Border-Radius and How create Shape?

Css border, an attribute Style that all UI developer uses to curve the corners, but what we can do and what else we can do with it?

normally we use a single value or four value border to shape this corners, but what if i tell you there is 3rd option for us to make this to next level and be more creative.

first let’s starts with first 2 options:

Single value

As you probably familiar with border concept in single value option we use a single value like this [ border-radius:1em; ] and it is one of the most commonly use border styling. which add the amount of 1em to all four corner of the box.

As you can see in above example we used a single value of 15px for the box’s border-radius. for this value you also can use px, rem or em or you can also use percentages. bit keep in mine The percentage value is based on the width and height of the given element. So when you use it on a rectangle, you will no longer have symmetrical corners.

Four value

in four Value approach you use more than one value, which start setting values for each corner, beginning in the top left corner and then moving clockwise. Again you can also use percentages, and you could also mix percentages with fixed-length values. pretty much simple but more accessible than single value.

Eight values (this is interesting part)

i assume all of you have tested the first 2 approach and done it millions time in your projects. but now i am going to explain how we can use eight value separated by slash.

we are still going to use same concept as four value but in this case we add / after each value.

“If values are given before and after the slash, then the values before the slash set the horizontal radius and the values after the slash set the vertical radius. If there is no slash, then the values set both radii equally.” W3C

So, values before the slash are responsible for horizontal distances whereas values after the slash define the vertical lengths. But what does that mean? Remember percentage values on rectangular shapes? We had different absolute values for vertical and horizontal distances and asymmetrically rounded corners, and that is precisely what you get when you use the slash syntax.

The shapes that you get with this look a little odd, to be honest. But remember the circles you create with border-radius: 50%. You get a circle because both values defining one side add up to 100% (50% + 50% = 100%) and there is no straight line left, that reminds you of the original square. If you apply the same logic to the full eight value border-radius syntax, you can create a shape that looks a little like a plectrum or an organic cell:

See in Action