Home/ Questions/Q 9117677
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T04:57:09+00:00

I am trying to create a curved line using just CSS and HTML. For

  • 0

I am trying to create a curved line using just CSS and HTML. For some reason the line is thicker in the middle than on the sides. Why is this happening?

enter image description here

HTML:

<div class="smile"></div>

CSS:

.smile{
    width: 150px;
    height: 80px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%; 
    border-bottom: 5px solid black;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It increases in thickness towards the middle because you have specified the border-width property for the bottom border of the div as 5px. But because there are no declarations for the left or right border properties the border has to render a line from 0px to 5px smoothly in order to render as an appropriately rounded corner. Hence the gradual increase in thickness.

    • 0