Is there any way to make border-radius pixelated?

Question

I'm facing a problem that I don't know solution to.

I'd like to create div, that has pixelated border-radius so it fits my pixel art project.

Here is my code. image-rendering works well for images but it doesnt affect div itself.

div.pixelated{
  width: 200px;
  height: 40px;
  font-size: 16px;
  background: whitesmoke;
  border: 2px solid black;
  border-radius: 5px;
  image-rendering: pixelated;
  text-align: center;
  }

<div class="pixelated">
  <p>Some content</p>
</div>

Is there any solution? Thank you and have a nice day. :)

A quick Google came up with a few results. [Result1](https://codepen.io/darcy/pen/yGocb), [Result2](https://codepen.io/fallwestmike/pen/ezOGJK), [Result3](http://jsfiddle.net/alter/wGSab/) — Joseph Webber, Jul 04 '18 at 17:47

score 0 · Answer 1 · answered Jul 04 '18 at 18:02

I think what you are referring to is called "gradient border". I do believe this treats the border as an image instead of line rendering element.

Examples:

.top2btm { 
                border-width: 3px; border-style: solid; 
                -webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
                -webkit-border-image: -webkit-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%; 
                -moz-border-image: -moz-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%; 
                -o-border-image: -o-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%; border-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0)) 1 100%; 
               }

This one is a corner-box border graidient:

             .btm-lt { position: relative; } 
             .btm-lt:before, .bot-left:after {
                       content: ""; 
                       position: absolute;
                       bottom: -3px; 
                       left: -3px;
                        } 
             .btm-lt:before {
                            top: -3px; 
                          width: 3px;
                         background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000), to(transparent)); 
                         background-image: -webkit-linear-gradient(transparent, #000); 
                         background-image: -moz-linear-gradient(transparent, #000);
                         background-image: -o-linear-gradient(transparent, #000); 
                           } 
             .btm-lt:after { 
                               right: -3px; 
                               height: 3px; 
                     background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#000), to(transparent)); 
                     background-image: -webkit-linear-gradient(left, #000, transparent); 
                      background-image: -moz-linear-gradient(left, #000, transparent); 
                      background-image: -o-linear-gradient(left, #000, transparent); }

Is there any way to make border-radius pixelated?

1 Answers1