Enter a PX, REM, EM, or percentage value in the field below to modify the border radius of the box provided. Then copy and paste the CSS provided into the CSS of your project.
Make sure to bookmark this page, and please share using the buttons below.
CSS Border-Radius Information
- The border-radius adds rounded corners to an element within an HTML document.
- The border-radius property can be attributed to all four corners at the same time or individual corners.
- Referencing border-radius with one value will default all four corners to the element’s border-radius.
Rules for Individual Corners
-
- If four values of border-radius are used, the first is top-left, second top-right, third bottom-left, and fourth bottom-right.
ex: border-radius: 10px 40px 120px 0px;
-
- Three values used for border-radius applies to top-left, top-right and bottom-left, while the final value applies to bottom-right.
ex: border-radius: 20px 80px 0px;
-
- Two values apply to the top and bottom.
Other Online CSS Border-Radius Tools To Try
- Border-Radius.com – Offers four-corner sizing.
- CSSmatic.com – Offers a slider option for values as well as fields.
- CSS3gen.com – Offers a blend of the previous two tools. Also offers a square-based corner drag-and-drop option.