Advanced CSS borders (animations, shapes, object-fit) — web design tutorial

Borders are one of the few things on the web that contribute to an element’s size, unless the element has explicit dimensions set.

This lesson covers how to set CSS border radius properties, border styles, border colors — and expands into animations, overflow, and even more advanced CSS properties like object-fit, which can be used to achieve perfectly circular, consistent image elements. We'll also cover CSS border styles that involve different border colors on the same element, including animated transitions on beveled edges.

00:00 - Introduction
00:48 - Borders
01:27 - Shapes
03:48 - Sides & edges
04:40 - Bevels
05:24 - Animated transitions
06:55 - Recap

Note: We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

----------

[pakoz_]

This guy makes webflow times interesting

[tonidebcn]

Tutorials are now FAR MORE BETTER because properties are taught in context and not in an abstract way. And with real life web design problems. Congratulations 😍

[jonathanbernardi]

This is what you can call teaching skills. The people at Webflow are amazing.

[LivakProductions]

This guy is amazing, but it doesn't matter, except it does.

[TravMan]

Amazing platform, and even more amazing teacher. The way Webflow creates their tutorials and the tone of which he speaks is so engaging. Congratulations to making tutorials interesting!!

[RishabKapadia]

I'm obliged to like each and every video I watch here.

[robotman]

I love you Webflow. I've been consuming many of these lessons with a smile on my face!

[lisaraub]

This guy cracks me up! Not only does he know his stuff but he's also a master at presenting it.

[TribuOlaf]

Awesome, as always. Quick question: which program do you use to record the screen? Thanks!

[attrapehareng]

That will be awesome to have access to border radius in the animation interactions!

[sagarparaswal]

That was an incredible explanation Sir.

[hildormuthafo]

Very cool stuff, but is there going to be support for border-image at some point?

[dawniebug]

I've been trying to work with html and css... this is a while different ballpark.... I'm so lost

[Ddos]

I stopped making websites, but if YouTube recommends me this guy, I will 100% click on the video.

[davidmaxwaterman]

What about a border around the actual image of an img element that has object-fit:cover? The border is on the img's box, not the actual image itself...which is irritating.

[understandyourselfenjoyimp]

absolutely love the little jokes they put in!!! it's genius !!

[shrimpflea]

What about adjusting padding of a border, say on just one side?

[nicolaszakidalov]

It seemed to me or I noticed a new button in the states?

[GregStenson]

I still actually laugh out loud at these videos.

[thesouthsidedev]

who else is watching, just to hear him talk?