We are going to continue with the CSS examples of border types in which we have already seen how to insert images with border on our web pages and how to create a border with dashed lines to be able to apply it to any box-type element of our designs. In today’s case, we are going to see how we can create a border with a double line using CSS. We can apply this type of border on any box-type element that we have included in the design of our web pages.
The first thing we have to know is that to obtain a border with a double line using CSS we use the
border-style
. In this case, the value that must be given to make the line double is «double».
There are several ways to define a style. For example, we can do it using the element.
style
or directly through the attribute
style
of the elements HTML. This will depend on how many times you want to reuse the style. If you are going to reuse it on many elements, the first option is recommended, and if it is something specific, it is advisable to opt for the second option.
In this example, in order to obtain a border with a double line, we are going to use the second way. Let’s define a content layer and apply the double line border style to it. So, about the element
div
, which represents a layer in HTML, we add our code CSS:
<div style="border-style:double"> ... </div>
Although we can define it in any other element. For example, in an image, which is represented by an element
img
in HTML, the code we would have would be the following:
<img src="codeline.jpg" style="border-style:double"/>
I hope you liked it and that you find it useful to know how we can define a border with a double line using CSS.
How would you define a style so that you can have a double line border that we can apply to many elements of your design? Will you tell us in the comments?