CSS Border Radius Tricks
Tags: webdev, css, frontend, tutorial
Published: 2023-03-07 20:24:56

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.


![CSS Border Radius — Created By [Rutik Patel](https://medium.com/@rutikkpatel)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g7bngipxiph6agfyvj0i.png)

&nbsp;
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:

```css
border-top-left-radius: 40px;
border-top-right-radius: 10px;
border-bottom-right-radius: 60px;
border-bottom-left-radius: 50px;
```

&nbsp;
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;**

```css
border-radius: 40px 10px 60px 50px;
```

&nbsp;
Let’s Start with TRICKS ✨ ✨

&nbsp;
## 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.

![](https://cdn-images-1.medium.com/max/2000/1*xvqVQh0niiWkAT2fE8Jxzw.png)

&nbsp;
### 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.

```css
border-radius: 40px;
```

![border-radius: 40px;](https://cdn-images-1.medium.com/max/2000/1*ZA54y0WDiTBjtq-tKbbQnA.png)

&nbsp;
### 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.

```css
border-radius: 40px 10px 60px 50px;
```

![border-radius: 40px 10px 60px 50px;](https://cdn-images-1.medium.com/max/2000/1*bA4PCBpPaDgDOqrc9iPEmQ.png)

&nbsp;
### 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.

```css
border-radius: 10px 50px;
```

![border-radius: 10px 50px;](https://cdn-images-1.medium.com/max/2000/1*bi_NGmvMd6ImWy_f6hHmjA.png)

&nbsp;
### 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.

```css
border-radius: 0 40px 40px 0;
```

![border-radius: 0 40px 40px 0;](https://cdn-images-1.medium.com/max/2000/1*RU6ZssvukXSE4iybP4DUMQ.png)

&nbsp;
### 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.

```css
border-radius: 0px 80px 0px 0px;
```

![border-radius: 0px 80px 0px 0px;](https://cdn-images-1.medium.com/max/2000/1*OfDZJpIsVnfx03vzGjPtWg.png)

&nbsp;
### 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”**

```css
border-radius: 47px / 10px;
```

![border-radius: 47px / 10px;](https://cdn-images-1.medium.com/max/2000/1*8ojoYHnSPObz4jp5z8iGkA.png)

&nbsp;
### 8. Fancy Border Radius Generator

There are many online tools available for generating CSS borders, but my favorite tool is **[FANCY-BORDER-RADIUS](https://9elements.github.io/fancy-border-radius/)**.


![[**FANCY-BORDER-RADIUS](https://9elements.github.io/fancy-border-radius/)**](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hpl05t19d8rb38ev8fit.png)

&nbsp;
Here is one example for you in which I used this tool for border

```css
border-radius: 0% 100% 0% 100% / 0% 100% 0% 100%;
```

![border-radius: 0% 100% 0% 100% / 0% 100% 0% 100%;](https://cdn-images-1.medium.com/max/2000/1*6jVrSval0ygQW20DulOZnA.png)

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.