CODEWITHSUNDEEP
htmlcss
user2024080
user2024080

Reputation: 5091

How can I use shadow to create a solid 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?

.parent{
  background: #FFF;
  padding:5rem;
  box-shadow: inset 1px 1px 0px 2px rgba(0,0,0,1);
}
<div class="parent"></div>

Upvotes: 0

Views: 69

Answers (3)

Temani Afif
Temani Afif

Reputation: 272648

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

Using outline

.parent{
  background: #FFF;
  padding:5rem;
  outline:2px solid rgba(0,0,0,1);
}
<div class="parent"></div>

Using Box-shadow

.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);
}
<div class="parent"></div>


<div class="parent inset"></div>

Using gradient

.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;
}
<div class="parent"></div>

Another way with gradient if you want to have a 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;
}
<div class="parent"></div>

Upvotes: 0

stemon
stemon

Reputation: 651

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);
}
<div class="parent"></div>

Upvotes: 1

fen1x
fen1x

Reputation: 5870

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

.parent{
  background: #c9c9c9;
  padding:5rem;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,1);
}
<div class="parent"></div>

Upvotes: 1

Related Questions