Dotted borders

Through this simple example we will see how we can create borders with points. Which we can apply to multiple objects on our page HTML.

Borders can be set using the border-style. When we want the border to be dotted, we must use the “dotted” value.

border-style:dotted;

We can apply this value to several HTML elements directly or create an adhoc style where we define this type of border. In our example we are going to apply it to the tables and we are going to create the “border_with_dots” style, which, using inline styles, we will apply to the specific element we want.

.dotted_border{
  border-style:dotted;
}
table{
  border-style:dotted;
}

To see the effect in the tables, just add a table to our page:

<table> ... </table>

To apply the inline style to a specific element, we use the class attribute. Let’s see how it would look on an image:

<img class="dotted_border" src="codeline.jpg">

Leave a Comment