Corner rounding on pure CSS with anti-aliasing

I bring my 5 kopecks to the problem of rounding off the corners. I want to propose a method that is not revolutionary, but just slightly improves the other.

Many are familiar with the cornering method of CSS tools, which are actively used by Google. I personally met him on the Shtorkin.ru website.

The method is made in pure CSS, without images, without JS, completely cross-browser. He calmly stretches in width and height. Its only drawback: the lack of smoothness (aliasing). In principle, everything is completely fixable.

So, in Photoshop, an option with anti-aliasing is made. It turns out that all you need to do is add 7 pixels, of which 4 colors are about half lighter than the color of the block, and 3 are even lighter, almost merging with the background.
')
We take as a basis the option with Shtorkin.ru:



Source:

<style>
.grc {padding: 5px 15px;}
.grc .e{display:block; position: relative;}
.grc .e *{display: block; overflow: hidden; position: relative; z-index: 2; font-size: 0px;}
.grc be b, .grc be i, .grc be u {height: 1px !important; background: #1d5198;}
.grc be b{margin: 0 5px;}
.grc be i{margin: 0 3px;}
.grc be u{margin: 0 2px;}
.grc be span{margin: 0 1px; height: 2px !important; background: #1d5198;}
.grc div{background: #1d5198; padding: 0 10px; color: white;}
</style>

<div style='width: 300px;'>
<div class='grc'>
<b class='e'><b></b><i></i><u></u><span></span></b>
<div> .<br/> 730 Kb.</div>
<b class='e'><span></span><u></u><i></i><b></b></b>
</div>
</div>

How it works?

The upper part of the block 5 pixels high consists of four blocks extended in width. 3 blocks have a height of one pixel, and another block has a height of 2 pixels. The blocks have indents of 5, 3, 2 and 1 pixel on the left and on the right, and thus a rounding effect is obtained.

Add the first halftone color

We add not complex properties for all our elongated blocks:
.grc be b, .grc be i, .grc be u, .grc be span {border-left:1px solid #9eb4d3;border-right:1px solid #9eb4d3;}

and at the same time we reduce the indents of these blocks by 1 pixel. We get the result:



Well, it looks much smoother already, anti-aliasing appeared, so to speak. And the code has increased by only 120 bytes.

Add a second halftone color

On the left, two semitones in a row is not the best option, so we split up a block 2 pixels high by two by 1 pixel, and set the new color of the left and right border to the upper one. Here is what we get:



The code was added only 80 bytes, it looks even better.

We bring our idea to the logical end

Since we have introduced the second halftone color, then let's bring our idea to the end. The upper two layers need to add an additional left and right border. To do this, create another block, which is placed inside the two upper blocks. Reduce the indents of these blocks by another pixel. And that's what happens:



The code has increased by 400 bytes, which in our times is not much. Full cross-browser compatibility, lack of background images and JS, there are no restrictions on the width and height of the block. Looks more rounded round, as if the corner was prepared in Photoshop.

End Code:

<style>
.grc {padding: 5px 15px;}
.grc .e{display:block; position: relative;}
.grc .e *{display: block; overflow: hidden; position: relative; z-index: 2; font-size: 0px;}
.grc be b, .grc be i, .grc be u, .grc be s, .grc be span, .grc be strong {height: 1px !important; background: #1d5198;}
.grc be b, .grc be i, .grc be s {border-left:1px solid #f1f4f9; border-right:1px solid #f1f4f9;}
.grc be u, .grc be b strong, .grc be i strong, .grc be span {border-left:1px solid #9eb4d3; border-right:1px solid #9eb4d3;}
.grc be b{margin: 0 3px;}
.grc be i{margin: 0 1px;}
.grc be u{margin: 0 1px;}
.grc be s{margin: 0;}
.grc be b strong, .grc be i strong {margin: 0;}
.grc be span{margin: 0;}
.grc div{background: #1d5198; padding: 0 10px; color: white;}
</style>

<div style='width: 300px;'>
<div class='grc'>
<b class='e'><b><strong></strong></b><i><strong></strong></i><u></u><s></s><span></span></b>
<div> .<br/> 1 130 Kb.</div><br/>
<b class='e'><span></span><s></s><u></u><i><strong></strong></i><b><strong></strong></b></b>
</div>
</div>

A little philosophy

In the first version, in which there is a small "ladder", it creates something like this:



The look, facing the "ladder", and not with a smooth line, draws extra cloves. But does this mean that smoothing is much better? Here is what the eye draws when looking at the rounded image:



There is a feeling of a little blur. All this is due to the fact that the pixel on the screen is still quite large, and it is not yet possible to achieve clarity of printing, even using the background image.

Of course, everything in the pictures is exaggerated, in real examples this is barely noticeable.

What method to use, with a ladder or smoothing? I think it depends on the overall mood of the site. Google uses a round with a ladder, and this underlines his asceticism. On any site dedicated to bed linen or pillows is better to use anti-aliasing.

Disadvantage number 1 method

Is everything all right? Not really. The original version is easy to lay down on any background, on white, on black, on any color or background image. And our version will only fall beautifully on a white or light background. If the background is black or dark, then the halftone colors will need to be prepared on the basis of other shades. And if on different parts of the page the background is different, you will have to write separate styles.

True, there is a nuance. There is a sense to insert smoothing if only the background and the block are of very contrasting colors. If the contrast is not strong, then anti-aliasing does not make sense; it is easier to apply the original version.

However, you can try to play with the opacity property. Instead of borders, we create blocks with a height and width of 1 pixel, and give them the color of the block and the translucency of 0.6 and 0.2. We get a graph-independent code, but not everything is smooth here either:

1. opacity is not supported by IE, with it in version 8, too.
2. The code swells up sharply and becomes more complicated, 7 additional blocks are added at once. Are the results worth the meal? In my opinion not.

Disadvantage number 2 method

The second drawback of the method is that it is difficult to change the radius. Here the radius is visually 5-6 pixels. If you increase the radius by two, then the blocks should already be 10, different half-tones will need to be entered at least 5, but most likely 7-8, it is easy to get confused in the code.

And methods using pictures or JS easily cope with this task.

Disadvantage number 3 method

As pointed out in the comments foxweb , homm , SelenIT and reaferon the main drawback: a very complex code. From the point of view of semantics, this is not pure CSS, but practically a hack.

Authorship and license

The code is distributed for free, there is nothing super-clever about it. In essence, this is just an idea that is not licensed. Use and modify health.

The author of the text and pictures Vadim Galkin. Source code author Semyon Shtorkin Orlov . When publishing an article, please refer to my personal page .

Post script

The next day, after the publication of this post, XAMelleOH offered an option that, compared to my method, has several advantages:
- much easier to change the radius,
- translucency
- simpler code.

I recommend .

Post script 2015

Now I am reading this article and it seems that I did not write it 6 years ago, but before Gagrin’s flight. How quickly our industry and tools are changing! The one who studies CSS now, I think, is sure that border-radius was always. It's so obvious!