Responsive borders with CSS outline

Categories

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
CSS
.my-element {
  outline: 3px solid #ff00ff;
}

Hello, I’m Andy and I’ll help you build fast, accessible websites & design systems.

I’m a freelance CSS and design systems consultant, based in the UK. I specialise in design systems and creative web design, such as landing pages and campaign work.

I’m currently helping Google by refactoring the CSS and creating a design system for web.dev, but I have availability for projects such as small websites, landing pages and consultancy. I will have full availability for larger projects in January 2022.

Hire me