DEV Community

Cover image for Create fancy borders for your images.

Posted on

Create fancy borders for your images.

Recently I needed to make odd shaped borders for some images in a card UI. Most of the times you would create these images in photoshop or some other imaging software. So I looked into border radius and its advanced features.

Most developers know that in CSS you can achieve rounded corners by applying border-radius:

Alt Text

here I have 2 values for border-radius which are 10% and 20%.

But you can have upto 8 values, below is a list of configurations for border-radius values and how those are applied:

/* Radius is set for all 4 sides */
border-radius: 10px;

/* top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5%;

/* top-left | top-right-and-bottom-left | bottom-right */
border-radius: 2px 4px 2px;

/* top-left | top-right | bottom-right | bottom-left */
border-radius: 1px 0 3px 4px;

/* The syntax of the second radius allows one to four values */
/* (first radius values) / radius */
border-radius: 10px / 20px;

/* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5% / 20px 30px;

/* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */
border-radius: 10px 5px 2em / 20px 25px 30%;

/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 5% / 20px 25em 30px 35em;
Enter fullscreen mode Exit fullscreen mode

The above values are from MDN Web Docs Here they try to explain how these values are applied. But the problem is when you apply two values to a single corner. This makes it very confusing. This configuration is achieved by separating values with a single '/' (slash).With this configuration, You can create complex borders like :
Alt Text

There is an article that explains this further .

But how can you practically use this?

I have come to the conclusion that you have to be a genius to create meaningful shapes from the top of your head with the 8 value configuration. But luckily there is a border radius generator you can use here

Alt Text

Here you can graphically adjust the borders with the little handles and you copy and paste the border-radius values into your CSS styles.

Top comments (0)