Boxed border
A simple border on the inside of an image.
/* START add borders to images */
.hws_border img{
outline: 1px solid #44A148;
outline-offset: -15px;
}
/* END add borders to images */Code language: CSS (css)
With cross lines in the corners
Use the variable to set the color.
/* START add borders to images */
:root {
--hws_border_color: #E1B75B;
}
.hws_border {
height: 100%;
width: 100%;
}
.hws_border:before,
.hws_border:after
{
left: 10px;
top: 10px;
bottom: 0;
content: "";
position: absolute;
right: 0;
z-index: 20;
}
.hws_border:before {
height: calc(100% - 20px);
margin: 0 10px;
width: calc(100% - 40px);
border-left: 1px solid var(--hws_border_color);
border-right: 1px solid var(--hws_border_color);
}
.hws_border:after {
height: calc(100% - 40px);
margin: 10px 0;
width: calc(100% - 20px);
border-bottom: 1px solid var(--hws_border_color);
border-top: 1px solid var(--hws_border_color);
}
/* END add borders to images */Code language: CSS (css)