Border Radius generator


The border-radius property creates rounded corners to an element. Each corner can be set independently, or all at the same time by selecting 'all corners'. In addition, you can set the border property by selecting the style, width and color.


Effects
Settings

Here you can customize the appearance of the result area.

Saved!
Reseted!


CSS Code to copy



Browser compatibility

To go further


The border-radius property allows you to add rounded corners to an html element, without the need of using images or CSS hacks.
Let's assume you have an element identified MyDiv, defined as follows:

<div id="MyDiv"> </div>

To round each corner in the same way, you can use the following syntax:

#MyDiv {
    border-radius: 10px;
}

In this example, the four corners are rounded to 10 px.
It is also possible with this syntax to specify a different value for each corner, such as 2 px for the top left corner, 4 px top right, 6 px bottom right, and 8 px bottom left:

#MyDiv {
    border-radius: 2px 4px 6px 8px;
}

Another syntax allows you to define each rounding value by a different CSS property. The rule defined below makes it possible to obtain the same result as before:

#MyDiv {
    border-top-left-radius: 2px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 8px;
}

Today, a large number of users use browser versions for which the border-radius property is not standardized. For maximum compatibility, it is very important to add lines with browser prefixes (like -moz- for Mozilla, -webkit- for Chrome and Safari).

#MyDiv {
    -webkit-border-radius: 2px 4px 6px 8px;
    -moz-border-radius: 2px 4px 6px 8px;
    border-radius: 2px 4px 6px 8px;
}

Writing these codes by hand can be tedious, which is why it is very useful to go through a CSS generator like MakingCSS.



Leave a suggestion