3 CSS Features You Should Know
Tags: webdev, productivity, css, beginners
Published: 2021-06-04 10:55:42

###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.

**box-shadow solution:** You must have used the box-shadow property to create shadows. However, there is a parameter knows as **spread radius** (a fourth parameter), which makes the shadow large or small by the amount we specify. And a **positive** spread radius combined with zero offset and zero blur creates a **shadow** that looks exactly like a solid border.

**“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;

![MULTIPLE](https://exceed-team.com/images/1896/3-css-features-you-should-know.webp?s=de&a=a)

**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.

**Slashes:** A very lesser know fact is that **border-radius** accepts different horizontal and vertical radius & if you use a slash to separate the two, then it allows us to create elliptical rounding at the corners.

**Percentage:** Even though we can use **px** and other **CSS** units to define our border-radius property, it also accepts percentage which solves our problem of calculating how many pixels to enter in the property.

**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.

![FLEXIBLE](https://exceed-team.com/images/1897/2-flexible-ellipses.webp?s=de&a=a)

###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.

**Using Filters:** You have to simply apply the **filter** property to your image and choose the saturation that you want.

For example, we can use the **sepia() filter** which gives the image a desaturated **orange-yellow** tint, and change the saturation with **saturate()** filter to increase the saturation of every pixel. And at last, we can apply CSS transition to get our final results wherever a hover interaction is initiated by the user.

![COLOR](https://exceed-team.com/images/1898/3-color-tinting.webp?s=de&a=a)

Thank you for reading this! I hope this article ["3 CSS Features You Should Know"(https://exceed-team.com/tech/css-features-you-should-know?s=de&a=a) was useful to you! Good luck and have a nice day, I will be happy to receive your feedback in the comments)