HTML Borders

The standard way to create HTML borders is to use CSS. Using CSS, you can create a border around any HTML element.

There are a range of CSS properties that you can use to define borders but the shorthand border property is the most concise way.

Below are some examples of what you can do with HTML, borders, and CSS.

Solid Border

Border Radius

You can use border-radius to create rounded corners.

Bottom Border

You can specify a border on any side of an element using the border-top, border-right, border-bottom, and border-left properties.

There are many other border properties that are even more precise than this, such as the border-bottom-color, border-bottom-style etc.

For a full list of border properties, check out the list of CSS properties and filter by "border".

Dotted Border

Dashed Border

Outset Border

Inset Border

Grooved Border

Double Border

Ridged Border

Mixed Border

You can combine different border types and styles for each side of the HTML element.

Embedded Styles or External Styles?

All of the above examples use embedded styles to create the borders. You can also use external styles to apply the styles across multiple pages or a whole website. To do this, simply copy everything between the style tags and put it into your external style sheet, then replace the style tags with a link tag that points to your external style sheet.