By CSS we can configure the borders in multiple ways. One of them is to make the edges have a 3D effect. So today we are going to see how we can define 3D edges with CSS. The first thing to remember is that the border is an attribute CSS that can be applied to various elements of a page HTML: tables, images, layers,…
The attribute that allows us to modify the appearance of the border is
border-style
. In order to use it we will simply have to define a class CSS. The code for 3D borders with CSS would be similar to the following:
.myborder{
border-style:value;
}
Remember that styles can be defined within an associated file CSS, in an element
style
within the page or directly on an element HTML with the attribute
style
.
The values for 3D border effects are as follows:
- groove, shaped like a groove.
- ridge, shaped like a ridge.
- inset, with an effect towards the inside.
- outset, with an outward effect.
So, for example, 3D borders with CSS and with a groove shape would be defined as follows:
.groove{
border-style:groove;
}
You will only have to apply it to the element HTML using the attribute
class
. In the case of doing it on an image we would have the following line of code:
<img src="image.jpg" class="groove">
To be able to see the 3D effect it is advisable to use wide borders. For this we have the attribute CSS
border-width
. Likewise, if we use colors, with the
border-color
, we will see the 3D effects in their maximum splendor.
We can associate these attributes directly on an image by manipulating the element.
img
:
img {
border-color:#f00;
border-width: 10px;
}
I hope it is clearer to you how to use 3D borders. Have you used them or do you plan to use them in any of your designs? Tell us in the comments to learn about and share your experiences.