How’d you like to use CSS to easily create a border from an image or gradient?

A classic problem in CSS is maintaining the aspect ratio of images across related components, such as cards. The newly supported `aspect-ratio` property in combination with `object-fit` provides a remedy to this headache of the past! Let’s learn to use these properties, in addition to creating a responsive gradient image effect for extra flair.

In this tutorial you’ll learn about using gradients on the web. I’ll give you some examples, some exercises (such as how to create gradients for borders), and I’ll also throw in some useful...