Borders are often thought of as minor details that are used as a finishing touch to an image or container element. They serve as a nicety, but hardly anything to get excited about. But as CSS evolves, they have the potential to become something more.
With more complex coloring and special effects, designers can leverage borders to draw attention to important information. They can also play a role in user engagement and microinteractions.
SVG Border Magic by Louis Hoebregts
SVG images have become one of our best secret weapons when it comes to creating razor-sharp effects that work at various screen sizes.
In this example, it’s used to add a multicolor animated border that automatically responds to the size and shape of its container. No matter how large or small you resize the element, the border stays true.
See the Pen CSS border (using an SVG) by Louis Hoebregts
Fascinating Transitions by Giana
One staple use of CSS transitions has been changing a button’s border from one color to another.
It can still grab a user’s attention, but there are some interesting twists we can implement. This collection of unique border transitions adds an element of fun and is a great way to stand out.
See the Pen CSS Border transitions by Giana
Attention Getter by Mike Schultz
Here’s a solution that offers a smooth animated border. What’s nice about this setup is that it draws you in, but is far from being cheesy or over-the-top. It would make an outstanding call-to-action button.
See the Pen Animated CSS Gradient Border by Mike Schultz
Adding Function to Forms by Takuma
Form inputs are another common design element that can benefit from border effects. The slick animations in this Pen make for terrific microinteractions.
They leave no doubt in the user’s mind that they’ve successfully clicked into an input. It may be a small thing, but it makes the experience that much better. As a bonus, you’ll also find background and label effects as well.
See the Pen Awesome input focus effects by Takuma.I
Bordering on Groovy by Giana
Outlined text can be a powerful asset to any design. Even better if you add a compelling effect, such as this liquid-like flow animation. It would make for a super-cool logo or even header text.
See the Pen CSS-only shimmering neon text by Giana
Cool Clippings by Jintos
The clip-path effect is a print design favorite that has come to the web in recent years. It essentially enables design elements to become transparent shapes, thus allowing backgrounds to display through them.
In this example, you’ll see it applied to both a container’s border and text. There are any number of possibilities for crafting a unique look with this one.
See the Pen -webkit-background-clip:text CSS effect by Jintos
Elegant Link Hovering by Antonija Šimić
Here’s an example of how a plain old link (or HTML
span, in this case) can be dressed up with a border effect.
Choose from an impressive list of hover effects, each one adding a stunning animated border. This is an easy way to add a touch of class to text-based navigation.
See the Pen Sass mixin library for text hover by Antonija Šimić
A Hand Drawn Look by Tiffany Rayside
In most cases, borders tend to add a very clean and professional look. But what if you want something a little more hand-crafted?
This collection uses CSS
border-radius to add a touch of curve, giving the buttons a rustic feel.
See the Pen Imperfect Buttons by Tiffany Rayside
Bordering on Success
The examples above prove that designers no longer have to settle for the basics when it comes to styling borders. Now, a border can not only add a splash of color, but also movement as well.
And these effects can be added as an element renders on the screen or as users interact with them. Either way, border effects can add a unique yet subtle charm to any website.
- Code Snippets That Demonstrate the Repelling Effect in Web Design
- Attack of the Blob-Based Animated Backgrounds in Web Design
- Bringing the Curtain Effect to Your Website with These Snippets
- Forge Your Own (Animation) Path with These Snippets