Using CSS we can manipulate the borders of the elements HTML, which are in box format, in a very simple way. The property CSS that allows us to indicate what type of border we want is
border-style
. In this case we are going to see how we can create a border with dashed lines in CSS. And specifically for our objective and thus be able to have a border with dashed lines, the value to apply to the property
border-style
is «dashed».
But let’s go in parts, the first thing we have to do is define the style. To do this, we can create our own style, or apply it directly to one of the elements.
In the event that we want to define our own style we will do it in the following way:
.dashed_border{
border-style:dashed;
}
And in the case of wanting to apply it to an element, in our case a table, which is represented by the element
table
, we will do it in the following way:
table{
border-style:dashed;
}
We must remember that the styles we define must be placed inside the element
style
from HTML. Either on the page itself or by associating a CSS file. with these styles.
To apply these styles we must use the attribute
class
on the element that we want to apply the style to. For example, if we want to use an image, we would have the following line of code:
<img class="broken_edge" src="codeline.thumbnail.jpg" />
We must remember that the element in HTML allows us to insert an image in the element.
img
.
In the event that we have defined the style on an element, we will simply have to use the element HTML on our website.
With these simple steps we will have managed to create a border with dashed lines. And you, on what elements do you use this type of borders? Leave us your experiences in the comments.