Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
January 24, 2022 04:04 am GMT

CSS Funstuff: Animated Halfway Borders

Hi! Been a minute, but I'm back with another CSS tutorial!

This one will be pretty quick, but should give you a great launch point for extrapolating and creating something special.

Now you probably know that you can add borders to specific sides of an element, using, for instance:

.border-top {    border-top: 1px solid white;}

Result:

A screenshot of the result of the above code, showing a grey square, showing a thin white border at the top

But what you may not realize, is what happens when you add a very simple additional property: border-radius! Now, maybe this sounds super obvious, but just how cool it is, isn't obvious until you see it in action, so let's do that:

.border-top-round {    border-radius: 50%;    border-top: 1px solid white;}

Result:

A screenshot of the above code, showing a grey circle with a thin, tapered, white border, at the top

Cool, isn't it? No?
Well let's make it so!

Animating it all:

If the first bit wasn't all that impressive, maybe adding a little fun and flare should do the trick.

Check it out!

So what's the code for this one? Grab it here (it's free!):

Source Code


Original Link: https://dev.to/rolandixor/css-funstuff-animated-halfway-borders-24fp

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To