May 09 2021

1. Multiple Borders

There are times when we want to style our containers with different borders and multiple borders. But when it comes to applying multiple borders in CSS, developers usually end up having way too much useless extra elements. There are two great solutions in my knowledge to apply multiple borders without polluting your markup code.
Note: The reason why box-shadow is a good option to apply multiple borders is that we can simply add more borders by adding them in the same box-shadow property.”
For example;
3 css features you should know
outline solution: In case we need only two borders, using a regular border with the outline property for the outer one will do the job. This method provides us more flexibility as we can customize our border style ( we can use a dashed border for the second border). Also, we can control their distance from the boundaries of the element via the outline-offset property.

2. Flexible Ellipses

You must have face the issue while applying the border-radius to a square element with a large border radius that can turn into a circle. I have personally faced this problem a lot of times and here is a quick solution.
For example, if we have an element with the dimensions of 300px X 200px, we can easily turn that into an ellipse with a radius equal to half of its width and height.
2 flexible ellipses

3. Color Tinting

A very known effect to give a visual unity to a group of photos, where the effects are applied statically and removed on hover or some other interaction. Most of the time developers create two different versions of the image and use some simple CSS which takes care of swapping them. This approach is not recommended as it adds up more bloat and extra HTTP requests.
With CSS we can easily achieve this effect with a few lines of code.
3 color tinting
Thank you for reading this! I hope this article was useful to you! Good luck and have a nice day, I will be happy to receive your feedback in the comments)
Popular articles
Share your project’s scope, timeline, technical requirements, business challenges, and other details you consider necessary. Our team will study them and contact you soon. Let’s make an exciting product together!
By sending this form I confirm that I have read and accept the Privacy Policy