CSS Border Radius Tricks
CSS border-radius property allows developers to create stylish borders for their website elements. With border-radius, it is possible to create curved corners, circular shapes, and other geometric shapes. In this article, we will explore different types of borders that can be created using the CSS border-radius property.
Let’s start with the basics, and then we will take a deep dive into border-radius tricks.
The basic syntax for border-radius is to define each corner individually using the following syntax:
border-top-left-radius: 40px;
border-top-right-radius: 10px;
border-bottom-right-radius: 60px;
border-bottom-left-radius: 50px;Alternatively, you can define all four corners in a single line using CSS shorthand syntax:
border-radius : top-left top-right bottom-right bottom-left;
border-radius: 40px 10px 60px 50px;Let’s Start with TRICKS ✨ ✨
BORDER-RADIUS TRICKS
1. Without border-radius
We have one blue box without any border-radius. This creates a sharp corner around the edges of the box.
2. border-radius: 40px;
Using the border-radius property, we can create a rounded corner around the box. By setting the value to 40px, all corners of the box will be rounded with a radius of 40 pixels.
border-radius: 40px;
3. border-radius: 40px 10px 60px 50px;
In this case, we have set different values for each corner of the box. This creates a unique shape for the box.
border-radius: 40px 10px 60px 50px;
4. border-radius: 10px 50px;
By setting only two values, we can create an oval shape for the box. The first value (10px) is for the top and bottom corners, while the second value (50px) is for the left and right corners.
border-radius: 10px 50px;
5. border-radius: 0 40px 40px 0;
In this case, we have set different values for each corner of the box. This creates a unique diagonal shape for the box.
border-radius: 0 40px 40px 0;
6. border-radius: 0px 80px 0px 0px;
This creates a box with one rounded corner. The second value (80px) is for the top right corner, while the other three values are set to 0px.
border-radius: 0px 80px 0px 0px;
7. border-radius: 47px / 10px;
In this case, we have used the slash (/) to specify different values for the horizontal and vertical radii. The first value (47px) is for the horizontal radius, while the second value (10px) is for the vertical radius. This creates an oval shape with a horizontal radius of 47 pixels and a vertical radius of 10 pixels.
→ Note : it is known as “Elliptical rounding”
border-radius: 47px / 10px;
8. Fancy Border Radius Generator
There are many online tools available for generating CSS borders, but my favorite tool is FANCY-BORDER-RADIUS.
Here is one example for you in which I used this tool for border
border-radius: 0% 100% 0% 100% / 0% 100% 0% 100%;
This generates a border with rounded corners in the shape of a parallelogram.
Conclusion :
In conclusion, the CSS border-radius property allows developers to create visually appealing borders for their website elements. By adjusting the values, different shapes and styles can be achieved, making it a versatile tool for web design.
