Start a Free Trial CoreCommerce
Menu CoreCommerce Start a Free Trial

Customer Login

Don't have an account yet? Open a new store today! Click the link below to get started with your free 15 day trial of CoreCommerce.

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.