This content originally appeared on DEV Community and was authored by Keerthi
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:
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;
The above values are from MDN Web Docs https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius. 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 :
There is an article that explains this further https://9elements.com/blog/css-border-radius/ .
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 https://9elements.github.io/fancy-border-radius/
Here you can graphically adjust the borders with the little handles and you copy and paste the border-radius values into your CSS styles.
This content originally appeared on DEV Community and was authored by Keerthi
Keerthi | Sciencx (2021-05-27T13:48:42+00:00) Create fancy borders for your images.. Retrieved from https://www.scien.cx/2021/05/27/create-fancy-borders-for-your-images/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.