Multi tool use

Can I add a inset shadow like a border?

I am trying to add a border using box-shadow inset, because of the condition i am not able to use the border-box on one of the a element. But not getting. any help?

box-shadow

inset

border-box

a

.parent{
background: #FFF;
padding:5rem;
box-shadow: inset 1px 1px 0px 2px rgba(0,0,0,1);
}

border-box

3 Answers
3

Change the horizontal and vertical offset (value) of the shadow to 0px such as:

box-shadow: inset 0px 0px 0px 2px rgba(0,0,0,1);


.parent{
background: #FFF;
padding:5rem;
box-shadow: inset 0px 0px 0px 2px rgba(0,0,0,1);
}

If you want equal border-width on all sides - just remove offset-x and offset-y:

offset-x

offset-y

.parent{
background: #c9c9c9;
padding:5rem;
box-shadow: inset 0 0 0 2px rgba(0,0,0,1);
}

In case you cannot use the border property here is different techniques that allow you to create a border for your element:

border

.parent{
background: #FFF;
padding:5rem;
outline:2px solid rgba(0,0,0,1);
}

.parent{
background: #FFF;
padding:5rem;
margin:5px;
box-shadow:0 0 0 2px rgba(0,0,0,1);
}
.parent.inset {

box-shadow:inset 0 0 0 2px rgba(0,0,0,1);
}

.parent{
background: #FFF;
padding:5rem;
margin:5px;
background:
linear-gradient(#000,#000) top/100% 2px,
linear-gradient(#000,#000) bottom/100% 2px,
linear-gradient(#000,#000) left/2px 100%,
linear-gradient(#000,#000) right/2px 100%;
background-repeat:no-repeat;
}

Another way with gradient if you want to have a background-color:

background-color

.parent{
background: #FFF;
padding:5rem;
margin:5px;
background:
linear-gradient(pink,pink) center/calc(100% - 4px) calc(100% - 4px),
linear-gradient(#000,#000);
background-repeat:no-repeat;
}

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.