In a search of smooth rounded corners

I was thinking about adding some components in the layouts generated by the tools of this site. The first I considered is the box with rounded corners. There are many ways and discussions on how to create round corners.

Here I only have interest in using pure css and HTML, which should be easy to handle with script in the layout generators in the future.
The radius of the round corners could be customerized in any pixels.
The border of the curve must be as smooth as possible.

Let's take a tour from the very beginning.

Typical design of round corner

First, let's take a review of a typcal design of round corner, of which there are some variations on the web. This one is straight and easy to understand. 5 makeup elements are piled on the top and bottom of the box. A few comments I have on this design.

This design is given the background color the same as that of the box. When I need border style the line of the round corners looks not so smoothly. I amplified the size of the round corner to 10 times of its original size. It seems I find out some clue why the line is not smooth.
Here use <b> as the makeup element of round corner. <b> is an inline tag. It could not start a new line automatically and set height attibutes. But you can use the css {disply: block} to change its behavior to a block one. Why couldn't we use block element directly? It seems like we make bricks with cement while we have plenty of bricks available. I see no big difference from using <div> but only we need not add {disply: block} to let brower to do extra work.

CSS

.r1, .r2,.r3,.r4,.r5 {
    display: block;
    overflow: hidden; 
}
.r1 { 
    margin: 0 5px;
    height: 1px;
    background: #9BD1FA;
}
.r2 { 
    margin: 0 2px;
    height: 1px;
    background: #9BD1FA;
}
.r3 { 
    margin: 0 1px;
    height: 1px;
    background: #9BD1FA;
}        
.r4 {
    margin: 0 1px;
    height: 1px;
    background: #9BD1FA;
}
.r5 {
    margin: 0 1px;
    height: 1px;
    background: #9BD1FA;
}

HTML

<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b>
<b class="r5"></b>        
<div class="box0">This round box uses <b> as makeup element with the same background color as that of box. 
</div>        
<b class="r5"></b>
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>

This round box uses <b> as makeup element with the same background color as that of box.

This round box uses <b> as the makeup element with 1px width of border.

Dealing with maths

Look into the css code of above example, it seems the smoothness is decided by the height and margin of makeup elements. Is there any relationship between the height and margin?

Let's look at the picture on the left. Our purpose is to proximate the real quarter of circle by identifying optimized margin of the makeup elements, m₅, m₄, m₃, m₂, m₁. The height will always be 1 pixel in order to get the best precision. The radius of the corner R is the total height of all elements. Hence,

m₅ = R - (R² - h²)^½
m₄ = R - (R² - (2h)²)^½
m₃ = R - (R² - (3h)²)^½
m₂ = R - (R² - (4h)²)^½
m₁ = R

Extend the result to the number of the makeup elements n,

m_n = R - (R² - h²)^½
m_n-1 = R - (R² - (2h)²)^½
... ...
m₃ = R - (R² - ((n-2)h)²)^½
m₂ = R - (R² - ((n-1)h)²)^½
m₁ = R

When n is 3, 4, 5, 6,7 , we get the margin results of makeup elements at the radius of 3px, 4px, 5px, 6px and 7px, respectively.

n = 4

m₄ = 4 - (16 - 1)^½ = 0.13
m₃ = 4 -(16 - 4)^½ = 0.54
m₂ = 4 - (16 - 9)^½ = 1.35
m₁ = 4

n = 3

m₃ = 3 - (9 - 1)^½ = 0.17
m₂ = 3 - (9 - 4)^½ = 0.76
m₁ = 3

n = 5

m₅ = 5 -(25 - 1)^½ = 0.1
m₄ = 5 - (25 - 4)^½ = 0.42
m₃ = 5 - (25 -9)^½ = 1
m₂ = 5 - (25 - 16)^½ = 2
m₁ = 5

n = 6

m₆ = 6 - (36 - 1)^½ = 0.08
m₅ = 6 - (36 - 4)^½ = 0.34
m₄ = 6 - (36 - 9)^½ = 0.8
m₃ = 6 - (36 - 16)^½ = 1.5
m₂ = 6 - (36 - 25)^½ = 2.6
m₁ = 6

n = 7

m₇ = 7 - (49 - 1)^½ = 0.072
m₆ = 7 - (49 - 4)^½ = 0.29
m₅ = 7 - (49 - 9)^½ = 0.68
m₄ = 7 - (49 - 16)^½ = 1.26
m₃ = 7 - (49 - 25)^½ = 2.1
m₂ = 7 - (49 - 36)^½ = 3.39
m₁ = 7

n = 9

m₉ = 9 - (81 - 1)^½ = 0
m₈ = 9 -( 81 - 4)^½ = 0
m₇ = 9 - (81 - 9)^½ = 1
m₆ = 9 - (81 - 16)^½ = 1
m₅ = 9 - (81 - 25)^½ = 2
m₄ = 9 - (81 - 36)^½ = 2
m₃ = 9 - (81 - 49)^½ = 3
m₂ = 9 - (81 - 64)^½ = 5
m₁ = 9

n = 8

m₈ = 8 - (64 - 1)^½ = 0.06
m₇ = 8 - (64 - 4)^½ = 0.25
m₆ = 8 - (64 - 9)^½ = 0.58
m₅ = 8 - (64 - 16)^½ = 1.07
m₄ = 8 - (64 - 25)^½ = 1.76
m₃ = 8 - (64 - 36)^½ = 2.71
m₂ = 8 - (64 - 49)^½ = 4.13
m₁ = 8

n = 10

n = 11

n = 12

Testing

It's exciting but not the end. Each radius must be tested one by one and might be adjusted in order to find out the best value for the smooth round corner. It's obvious some calculated margin is less than 1 pixel, which is impossible. All decimals are rounded to integers. In the above example, there's a big gap between the last and 2nd last elements in the enlarged picture. Normally, we could compensate the gap by adding css {border-width: x}, in which x is about the difference of m₁ and m₂.

x = m₁ - m₂

As said, we care about the smoothness of the border of round corner. The following class will apply to every makeup element in order that the round corner has a border of 1px width.

.db {
   border-left:1px solid #999;
   border-right:1px solid #999;
 }

R = 3px

CSS code based on calculated result

.d33, .d32, .d31 { 
   overflow: hidden;
}
.d33 {
   height: 1px;
   margin: 0 1px;
}
.d32 { 
   height: 1px;
   margin: 0 1px;
   border-width: 2px
}       
.d31 { 
   height: 1px;
   margin: 0 3px;
   background: #999;
}

3 px radius of round corner with 1 px width of border based on the calculated result

HTML

<div class="d31 db"></div>
<div class="d32 db"></div>
<div class="d33 db"></div>
<div class="zbox0">3 px radius of round corner with 1 px width of border based on the calculated result
</div>        
<div class="d33 db"></div>
<div class="d32 db"></div>
<div class="d31 db"></div>

Adjusted CSS code

R = 4px

CSS code based on calculated result

.d44, .d43, .d42, .d41 {
     overflow: hidden;
}
.d44 { 
     height: 1px;
     margin: 0 0px;
}
.d43 { 
     height: 1px;
     margin: 0 1px;
}
.d42 { 
     height:1px;
     margin: 0 1px;
     border-width: 3px
}
.d41 {
     height: 1px;
     margin: 0 4px;
     background: #999;
}

4 px radius of round corner with 1 px width of border based on the calculated result.

HTML

<div class="d41 db"></div>
<div class="d42 db"></div>
<div class="d43 db"></div>
<div class="d44 db"></div>
<div class="4 px radius of round corner with 1 px width of border based on the calculated result.
</div> 
<div class="d44 db"></div>   
<div class="d43 db"></div>
<div class="d42 db"></div>
<div class="d41 db"></div>

Adjusted CSS code

.d44, .d43, .d42, .d41 {
     overflow: hidden;
}
.d44 { 
    height: 1px;
    margin: 0 0px;
}
.d43 { 
    border-width: 1px;
    height:1px;
    margin: 0 1px;
}
.d42 { 
     height:1px;
     margin: 0 2px;
     border-width: 2px
}
.d41 { 
     height: 1px;
     margin: 0 4px;
     background: #999;
}

4 px radius of round corner with 1 px width of border based on the adjusted result.

R = 5px

CSS code based on calculated result

.d55, .d54, .d53, .d52, .d51 { 
     overflow: hidden;
}
.d55 { 
     height: 1px;
     margin: 0 0px;
}        
.d54 {
     height: 1px;
     margin: 0 1px;
}
.d53 { 
     height: 1px;
     margin: 0 2px;
}
.d52 { 
     height: 1px;
     margin: 0 2px;
     border-width: 3px
}
.d51 { 
     height: 1px;
     margin: 0 5px;
     background: #999;
}

5 px radius of round corner with 1 px width of border based on the calculated result.

HTML

<div class="d51 db"></div>
<div class="d52 db"></div>
<div class="d53 db"></div>
<div class="d54 db"></div>
<div class="d55 db"></div>
<div class="zbox0">5 px radius of round corner with 1 px width of border based on the calculated result.
</div> 
<div class="d55 db"></div>
<div class="d54 db"></div>   
<div class="d53 db"></div>
<div class="d52 db"></div>
<div class="d51 db"></div>

Adjusted CSS code

.d55, .d54, .d53, .d52, .d51 {
     overflow: hidden;}
.d55 { 
     height: 1px;
     margin: 0 1px;
}        
.d54 { 
     height: 1px;
     margin: 0 1px;
}
.d53 {
     height: 1px;
     margin: 0 2px;
}
.d52 { 
     height:1px;
     margin: 0 3px;
     border-width: 2px
}
.d51 { 
     height: 1px;
     margin: 0 5px;
     background: #999;
}

5 px radius of round corner with 1 px width of border based on the adjusted result.

R = 6px

CSS code based on calculated result

.d66, .d65, .d64, .d63, .d62, .d61 { 
     overflow: hidden;
}
.d66 { 
     height: 1px;
     margin: 0 0px;
}
.d65 { 
     height: 1px;
     margin: 0 1px;
}        
.d64 {
     height: 1px;
     margin: 0 1px;
}
.d63 { 
     height: 1px;
     margin: 0 2px;
}
.d62 { 
     height: 1px;
     margin: 0 3px;
     border-width: 4px
}
.d61 { 
     height: 1px;
     margin: 0 6px;
     background: #999;
}

6 px radius of round corner with 1 px width of border based on the calculated result.

HTML

<div class="d61 db"></div>
<div class="d62 db"></div>
<div class="d63 db"></div>
<div class="d64 db"></div>
<div class="d65 db"></div>
<div class="d66 db"></div>
<div class="zbox0">6 px radius of round corner with 1 px width of border based on the calculated result.
</div> 
<div class="d66 db"></div>
<div class="d65 db"></div>
<div class="d64 db"></div>   
<div class="d63 db"></div>
<div class="d62 db"></div>
<div class="d61 db"></div>

Adjusted CSS code

 .d66, .d65, .d64, .d63, .d62, .d61 { 
     overflow: hidden;
}
.d66 { 
     height: 1px;
     margin: 0 0px;
     border-width: 1px
}
.d65 { 
     height: 1px;
     margin: 0 1px;
}        
.d64 { 
     height: 1px;
     margin: 0 1px;
}
.d63 { 
     height: 1px;
     margin: 0 2px;
     border-width: 2px
}
.d62 {
     height:1px;
     margin: 0 4px;
     border-width: 2px
}
.d61 { 
     height: 1px;
     margin: 0 6px;
     background: #999;
}

6 px radius of round corner with 1 px width of border based on the adjusted result.

R = 7px

CSS code based on calculated result

.d77,.d76, .d75, .d74, .d73, .d72, .d71 { 
     overflow: hidden;
}
.d77 { 
     height: 1px;
     margin: 0 0px;
}        
.d76 { 
     height: 1px;
     margin: 0 0px;
}
.d75 { 
     height: 1px;
     margin: 0 1px;
}        
.d74 { 
     height: 1px;
     margin: 0 1px;
}        
.d73 {
     height: 1px;
     margin: 0 2px;
}        
.d72 { 
     height: 1px;
     margin: 0 3px;
     border-width: 4px
}
.d71 { 
     height: 1px;
     margin: 0 7px;
     background: #999;
}

7 px radius of round corner with 1 px width of border based on the calculated result.

HTML

<div class="d71 db"></div>
<div class="d72 db"></div>
<div class="d73 db"></div>
<div class="d74 db"></div>
<div class="d75 db"></div>
<div class="d76 db"></div>
<div class="d77 db"></div>
<div class="zbox0">7 px radius of round corner with 1 px width of border based on the calculated result.
</div> 
<div class="d77 db"></div>
<div class="d76 db"></div>
<div class="d75 db"></div>
<div class="d74 db"></div>   
<div class="d73 db"></div>
<div class="d72 db"></div>
<div class="d71 db"></div>

Adjusted CSS code

.d77,.d76, .d75, .d74, .d73, .d72, .d71 {
     overflow: hidden;
}
.d77 { 
     height: 1px;
     margin: 0 0px;
}        
.d76 {
     height: 1px;
     margin: 0 1px;
}
.d75 {
     height: 1px;
     margin: 0 1px;
}        
.d74 { 
     height: 1px;
     margin: 0 2px;
}        
.d73 { 
     height: 1px;
     margin: 0 3px;
     border-width: 2px
}        
.d72 {
      height:1px;
      margin: 0 5px;
      border-width: 2px
}
.d71 { 
      height: 1px;
      margin: 0 7px;
      background: #999;
}

7 px radius of round corner with 1 px width of border based on the adjusted result.

R = 8px

CSS code based on calculated result

.d88,.d87, .d86, .d85, .d84, .d83, .d82,.d81 { 
     overflow: hidden;
}
.d88 { 
    border-left:1px solid #999;
    border-right:1px solid #999;
    height: 1px;
    margin: 0px;
}  

.d87 { 
    border-left:1px solid #999;
    border-right:1px solid #999;
     height: 1px;
     margin:0px;
}  
      
.d86 { 
    border-left:1px solid #999;
    border-right:1px solid #999;
     height: 1px;
     margin: 0 1px;
}
.d85 { 
    border-left:1px solid #999;
    border-right:1px solid #999;
     height: 1px;
     margin: 0 1px;
}        
.d84 { 
    border-left:1px solid #999;
    border-right:1px solid #999;
     height: 1px;
     margin: 0 2px;
}        
.d83 {
    border-left:1px solid #999;
    border-right:1px solid #999;
     height: 1px;
     margin: 0 3px;
}        
.d82 { 
    border-left:1px solid #999;
    border-right:1px solid #999;
     height: 1px;
     margin: 0 4px;
     border-width: 4px
}
.d81 { 
     height: 1px;
     margin: 0 8px;
     background-color: #999;
}

8 px radius of round corner with 1 px width of border based on the calculated result.

HTML

<div class="d81"></div>
<div class="d82"></div>
<div class="d83"></div>
<div class="d84"></div>
<div class="d85"></div>
<div class="d86"></div>
<div class="d87"></div>
<div class="d88"></div>
<div class="zbox0">8 px radius of round corner with 1 px width of border based on the calculated result.
</div> 
<div class="d88"></div>
<div class="d87"></div>
<div class="d86"></div>
<div class="d85"></div>
<div class="d84"></div>   
<div class="d83"></div>
<div class="d82"></div>
<div class="d81"></div>

Adjusted CSS code

.d88,.d87, .d86, .d85, .d84, .d83, .d82,.d81 { 
     overflow: hidden;
}
.d88 { 
    border-left:1px solid #999;
    border-right:1px solid #999;
    height: 1px;
    margin: 0px;
}  
.d87 { 
    border-left:1px solid #999;
    border-right:1px solid #999;
     height: 1px;
     margin:0px;
}        
.d86 { 
    border-left:1px solid #999;
    border-right:1px solid #999;
     height: 1px;
     margin: 0 1px;
}
.d85 { 
    border-left:1px solid #999;
    border-right:1px solid #999;
     height: 1px;
     margin: 0 1px;
}        
.d84 { 
    border-left:1px solid #999;
    border-right:1px solid #999;
     height: 1px;
     margin: 0 2px;
}        
.d83 {
    border-left:1px solid #999;
    border-right:1px solid #999;
     height: 1px;
     margin: 0 3px;
    border-width: 2px 
}        
.d82 { 
    border-left:1px solid #999;
    border-right:1px solid #999;
     height: 1px;
     margin: 0 5px;
     border-width: 3px
}
.d81 { 
     height: 1px;
     margin: 0 8px;
     background-color: #999;
}

8 px radius of round corner with 1 px width of border based on the adjusted result.

R = 9px

CSS code based on calculated result

.d99,.d98,.d97, .d96, .d95, .d94, .d93, .d92,.d91 { 
     overflow: hidden;
}
.d99 { 
    border-left:1px solid #999;
    border-right:1px solid #999;
    height: 1px;
    margin: 0px;
}
.d98 { 
    border-left:1px solid #999;
    border-right:1px solid #999;
    height: 1px;
    margin: 0px;
}  

.d97 { 
    border-left:1px solid #999;
    border-right:1px solid #999;
     height: 1px;
     margin:0 1px;
}  
      
.d96 { 
    border-left:1px solid #999;
    border-right:1px solid #999;
     height: 1px;
     margin: 0 1px;
}
.d95 { 
    border-left:1px solid #999;
    border-right:1px solid #999;
     height: 1px;
     margin: 0 2px;
}        
.d94 { 
    border-left:1px solid #999;
    border-right:1px solid #999;
     height: 1px;
     margin: 0 2px;
}   
.d93 {
    border-left:1px solid #999;
    border-right:1px solid #999;
     height: 1px;
     margin: 0 3px;
     border-width: 2px
}        
.d92 { 
    border-left:1px solid #999;
    border-right:1px solid #999;
     height: 1px;
     margin: 0 5px;
     border-width: 4px
}
.d91 { 
     height: 1px;
     margin: 0 9px;
     background-color: #999;
}

9 px radius of round corner with 1 px width of border based on the calculated result.

HTML

<div class="d91"></div>
<div class="d92"></div>
<div class="d93"></div>
<div class="d94"></div>
<div class="d95"></div>
<div class="d96"></div>
<div class="d97"></div>
<div class="d98"></div>
<div class="d99"></div>
<div class="zbox0">9 px radius of round corner with 1 px width of border based on the calculated result.
</div> 
<div class="d99"></div>
<div class="d98"></div>
<div class="d97"></div>
<div class="d96"></div>
<div class="d95"></div>
<div class="d94"></div>   
<div class="d93"></div>
<div class="d92"></div>
<div class="d91"></div>

Adjusted CSS code

.d99,.d98,.d97, .d96, .d95, .d94, .d93, .d92,.d91 { 
     overflow: hidden;
}
.d99 { 
    border-left:1px solid #999;
    border-right:1px solid #999;
    height: 1px;
    margin: 0px;
}
.d98 { 
    border-left:1px solid #999;
    border-right:1px solid #999;
    height: 1px;
    margin: 0px;
}  

.d97 { 
    border-left:1px solid #999;
    border-right:1px solid #999;
     height: 1px;
     margin:0 1px;
}  
      
.d96 { 
    border-left:1px solid #999;
    border-right:1px solid #999;
     height: 1px;
     margin: 0 1px;
}
.d95 { 
    border-left:1px solid #999;
    border-right:1px solid #999;
     height: 1px;
     margin: 0 2px;
}        
.d94 { 
    border-left:1px solid #999;
    border-right:1px solid #999;
     height: 1px;
     margin: 0 2px;
}   
.d93 {
    border-left:1px solid #999;
    border-right:1px solid #999;
     height: 1px;
     margin: 0 3px;
     border-width: 2px
}        
.d92 { 
    border-left:1px solid #999;
    border-right:1px solid #999;
     height: 1px;
     margin: 0 5px;
     border-width: 4px
}
.d91 { 
     height: 1px;
     margin: 0 9px;
     background-color: #999;
}

9 px radius of round corner with 1 px width of border based on the adjusted result.

Social Bookmark if the page is useful.