I’ve added a new tool online. It’s a CSS Border Generator.

It provides you with the possibility to set many properties, see how the results would look like, change the properties until it looks right and then copy the CSS code to paste on your site.

It supports the following properties:

You can see the results in a preview:

In this example, the preview shows how it looks like When entering 20px as top left border radius, 5px as top border width, dashed as top border style and #333 as top border color.

Below the preview, it will display the corresponding CSS code:

border-radius: 20px;
border-width: 5px;
border-color: #333;
border-style: dashed;

This tool will generate the following properties:

• border-radius
• border-width
• border-color
• border-style
• box-shadow
• outline
• outline-offset

It does not yet support collapsing border-color, border-width and border-style to a border property.