Responsive borders with CSS outline


You can use outline instead of border to achieve the same visual effect, but it’ll bleed over the edges nicely.

It’s really handy for setting borders for responsive UI where when the screen is narrow or shallow, the border is concealed.

Code language
.my-element {
  outline: 3px solid #ff00ff;


If you liked this post, you might like these ones, too

  1. Build a responsive media browser with CSS

    Using the power of modern CSS layout, we create a flexible media browser and video player layout that maintains its aspect ratio at all viewports.

  2. Use a set to remove array duplicates

    🔥 A handy quick tip.

  3. Create a user controlled dark or light mode

    Automatic dark and light themes, based on system user-preferences, are handy but in this tutorial, we take that one step further and give our users control.


Become a supporter by joining the Piccalilli Membership

For as little a $5 per month, you can get access to a private, friendly community, get a weekly newsletter and help to make as much content free as possible around here. If you join the $10 per month supporters club, you get access to premium tutorials and free access to mini courses!

Become a member

Sign up for updates

Stay up to date with updates from Piccalilli. You’ll get alerted as soon as any new content gets published. You’ll also get updates on upcoming courses and membership features! You can unsubscribe at any time, too.