Search code examples
cssantialiasing

How can I have border-radius without anti-aliasing?

I want to make div corners pixelated when they have border-radius by increasing scale() value, but browsers make them smooth, is there any way to achieve this?

enter image description here

Solution

  • I don't think there is a way to pixelate divs as they would be drawn using vectors. But with some clever CSS you can clip the borders. Check out Luke Bonaccorsi's Pixelated Rounded Corners tool.

    Here is the outcome of his tool

    .pixel-corners {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  background: black;
  height: 100px;
  width: 200px;


  /** Luke Bonaccorsi's Pixelated Rounded Corners **/

  clip-path: polygon(
    0px 20px,
    4px 20px,
    4px 12px,
    8px 12px,
    8px 8px,
    12px 8px,
    12px 4px,
    16px 4px,
    20px 4px,
    20px 0px,
    calc(100% - 20px) 0px,
    calc(100% - 20px) 4px,
    calc(100% - 12px) 4px,
    calc(100% - 12px) 8px,
    calc(100% - 8px) 8px,
    calc(100% - 8px) 12px,
    calc(100% - 4px) 12px,
    calc(100% - 4px) 16px,
    calc(100% - 4px) 20px,
    100% 20px,
    100% calc(100% - 20px),
    calc(100% - 4px) calc(100% - 20px),
    calc(100% - 4px) calc(100% - 12px),
    calc(100% - 8px) calc(100% - 12px),
    calc(100% - 8px) calc(100% - 8px),
    calc(100% - 12px) calc(100% - 8px),
    calc(100% - 12px) calc(100% - 4px),
    calc(100% - 16px) calc(100% - 4px),
    calc(100% - 20px) calc(100% - 4px),
    calc(100% - 20px) 100%,
    20px 100%,
    20px calc(100% - 4px),
    12px calc(100% - 4px),
    12px calc(100% - 8px),
    8px calc(100% - 8px),
    8px calc(100% - 12px),
    4px calc(100% - 12px),
    4px calc(100% - 16px),
    4px calc(100% - 20px),
    0px calc(100% - 20px)
  );
}
    <div class="pixel-corners">Pixel Corners</div>