0

I want to create a rounded border in CSS that looks pixelated when zoomed in.

This is what a rounded border looks like up close: https://i.stack.imgur.com/T9Q2g.jpg

And this is what I'm trying to make it look like: https://i.stack.imgur.com/B93wm.jpg

This is a specific aesthetic that I'm trying to achieve with my site, but I could not find any tutorials on how to do this. What I want to know is if this is possible outside of going oldschool and using images. I'm sure anyone who wants to recreate old-fashioned looking webpages will find this useful, and there's an entire community of pixel-artists that would love to use this too.

The fact that I can find no help on this tells me it's either not possible or I'm literally the only person who cares about this. If it's the latter then that's a serious negligence on the part of this programming language, especially when this option is already available for images with image-rendering.

mentioned offitype
  • 1
  • 2
  • Out of curiosity, what advantage does that offer you? – TCharb Jun 22 '17 at 03:59
  • 1
    You might be able to achieve something with [`border-image`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-image), but I guess that won't be easy to make something modular... – Kaiido Jun 22 '17 at 04:43
  • i dont think this is possible without background image or playing with gradient – Ismail Farooq Jun 22 '17 at 05:29

1 Answers1

2

There are multiple ways of doing this sort of thing, each with their own tradeoffs.

  1. Clip paths: You can use clip paths to hide part of an element. It keeps the element's current width by clipping part of the element's content.

    This pixelated corners generator uses that approach. You could also use CSS variables to allow for different results without having to use the generator each time.

    An example output:

    .pixel-corners {
     clip-path: polygon(
       0px 8px,
       4px 8px,
       4px 4px,
       8px 4px,
       8px 0px,
       calc(100% - 8px) 0px,
       calc(100% - 8px) 4px,
       calc(100% - 4px) 4px,
       calc(100% - 4px) 8px,
       100% 8px,
       100% calc(100% - 8px),
       calc(100% - 4px) calc(100% - 8px),
       calc(100% - 4px) calc(100% - 4px),
       calc(100% - 8px) calc(100% - 4px),
       calc(100% - 8px) 100%,
       8px 100%,
       8px calc(100% - 4px),
       4px calc(100% - 4px),
       4px calc(100% - 8px),
       0px calc(100% - 8px)
     );
   }

   
    <img src="https://pixelcorners.lukeb.co.uk/spaceship.png" class="pixel-corners" />

  1. Box shadows: Especially if you have a solid background, you can fake a border radius with box-shadows. Note that it adds to the element's current width, so you might want to compensate for that in your layout or width setting. For example:

    button {
  all: unset; /* Demo style */
  
  box-shadow:
    -4px 0 0 -2px black,   /* Left inner shadow */
    -8px 0 0 -4px black, /* Leftmost shadow */
     4px 0 0 -2px black,   /* Right inner shadow */
     8px 0 0 -4px black; /* Rightmost shadow */
}
button.debug {
  box-shadow:
    -4px 0 0 -2px red,   /* Left inner shadow */
    -8px 0 0 -4px green, /* Leftmost shadow */
     4px 0 0 -2px red,   /* Right inner shadow */
     8px 0 0 -4px green; /* Rightmost shadow */
}


/* Demo styles */
button {
  cursor: pointer;
  background-color: black;
  color: white;
  font-family: sans-serif;
  padding: 4px 4px;
}
div {
  margin: 4px;
}

   
    <div>
  <button>Test</button>
</div>
<div>
  <button class="debug">Test</button>
</div>
  1. Border images: In general you shouldn't need to use this approach these days but could be good if you have a more complicated border.
  1. Pseudo-elements: Again, you shouldn't need to use this approach most the time but can be good if you need specific effects.
Zach Saucier
  • 24,871
  • 12
  • 85
  • 147