How do I add rounded corners to a square border box?

To add rounded corners to a HTML generated square border box, add the following CSS properties to the element with the square border:

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

 

Here is an example of what it might look like in your CSS code:

#square-box {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

}

 

Feel free to adjust the "10px" number to the desired "roundness" you are trying to reach.

Please note that this will only work in modern browsers that support CSS3.

 

 

Search or Browse all topics