Inner Border With Different Values Each - css

How can I made inner border with different values each? For example:
Top: 20px
Right: 80px
Bottom: 40px
Left: 10px
Example that what I want made...
Thank you. :)


To make it an inner border, use two box-shadows on the element, separated with a comma, and use negative values on the second set.
Like this:
box-shadow: inset 10px 20px 0px #000, inset -80px -40px 0px #000;
Here is a jsfiddle demo: http://jsfiddle.net/dr_lucas/23Egu/326/
This is the cross-browser compatible CSS:
-webkit-box-shadow:inset 10px 20px 0px #000, inset -80px -40px 0px #000;
-moz-box-shadow:inset 10px 20px 0px #000, inset -80px -40px 0px #000;
box-shadow:inset 10px 20px 0px #000, inset -80px -40px 0px #000;
Note that if you need it to be compatible with old IE versions that don't support box-shadow, you can use CSS3pie:
http://css3pie.com/
Hope this helps.


You can do it by using box-shadow
Here is an example how i've used it


Inner border: Do you mean padding?
If so:
padding: 20px 80px 40px 10px; // top left bottom right
Else if you really meant border then:
border-top: 20px solid #color;
border-right: 80px solid #color;
border-left: 10px solid #color;
border-bottom: 40px solid #color;
It can be achieved via CSS3 box-shadow also

Related

Shadow to the left, right and the bottom

I am using this code:
border-right:0px solid #ddd;
height:85px;
box-shadow :5px 5px 10px 1px #eaeaea;
but i just got this results http://codepen.io/anon/pen/MpmPYq
I want to add the same width with shadow at left, buttom and the right side
I'll add this shadow to the dropdown menu at this site http://94.247.169.169/~welloteket/

If you want all four sides shadowed, try this following code:
div {
-webkit-box-shadow: 0 0 100px #000;
box-shadow: 0 0 100px #000;
}
I tested this on CodePen aswell, http://codepen.io/anon/pen/RpVeRG, It is because your Y and X is offset.
If you are looking for the left, right and bottom to be shadowed.
You can use the following code instead:
-moz-box-shadow: 0px 3px 8px rgb(100,100,100);
-webkit-box-shadow: 0px 3px 8px rgb(100,100,100);
box-shadow: 0px 3px 8px rgb(100,100,100);
http://codepen.io/anon/pen/Ppmxoa

Try this code :
div {
height: 200px;
width: 300px;
margin: 50px auto 0;
border-right: 0px solid #ddd;
height: 85px;
box-shadow: 5px 5px 10px 1px #eaeaea, -5px 5px 10px #eaeaea;
}
<div></div>

inset box shadow not working in my case?

div{
height:100px;
width:100px;
background:pink;
box-shadow: 0px 0px 0px 3px #000;
}
Above css worked but when I do box-shadow: inset 0px 0px 0px 3px #000; is wasn't work, I also tried box-shadow: 0px 0px 0px 3px #000 inset. Any idea?

try it with smaller number of parameters:
box-shadow: inset 0px 0px 3px #000;
or with specified engine:
-moz-box-shadow: inset 0px 0px 10px #000000;
-webkit-box-shadow: inset 0px 0px 10px #000000;
box-shadow: inset 0px 0px 10px #000000;

The syntax of box-shadow property is as follows:
box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;
You are not setting any value to h-shadow and v-shadow. That is why you are not able to see a shadow.
Try this code
div {
box-shadow: 10px 10px 5px #888888;
height: 100px;
width: 100px;
}
<div>
</div>

css - shadow on right and left

hi there i am using the following code to get a shadow on the right and left side of a div tag but all four sides of the div are shadowed...
.shadow1 {
border-right:1px solid #8d8d8d;
border-left:1px solid #8d8d8d;
-moz-box-shadow:0px 0px 5px 0px #000;
-webkit-box-shadow: 0px 0px 5px 0px #000 ;
box-shadow: 0px 0px 5px 0px #000;
}
is there a way to get the shadow appear only on the right and left side of the div... ?? any help would be appreciated... thanks in advance... :)

This seems to work ok :)
box-shadow: 5px 0px 5px -4px #000,
-5px 0px 5px -4px #000;
EDIT: Oh, I'm waaay late :p looks like we came to more or less the same conclusion tho.

try this:
jsFiddle
div {
width:200px;
height:200px;
margin:20px;
border:1px solid #8d8d8d;
-weibkit-box-shadow: 5px 0px 10px -5px #000, -5px 0px 10px -5px #000;
-moz-box-shadow: 5px 0px 10px -5px #000, -5px 0px 10px -5px #000;
box-shadow: 5px 0px 10px -5px #000, -5px 0px 10px -5px #000;
}

Try this : http://css3-drop-shadows.herokuapp.com/app
It provides a css3 generator at the end.
It uses :before and :after

How to create white css box shadow

I have the following box shadow css on my site. It looks great in Chrome, but Firefox and IE do not recreate the effect I'm looking for. I want a white solid shadow only on the bottom of a box. How do I make this work for all browsers?
box-shadow: 0px 10px -14px 14px #FFF;
-webkit-box-shadow: 0px 10px -14px 14px #FFF;
-moz-box-shadow: 0px 10px -14px 14px rgb(255, 255, 255);

Use this article or this code:
-moz-box-shadow: 13px 13px 0px 0px #FFFFFF;
-webkit-box-shadow: 13px 13px 0px 0px #FFFFFF;
box-shadow: 13px 13px 0px 0px #FFFFFF;

I've got it working in IE9 and FF by simply removing the vendor prefix lines. All you should need is:
box-shadow: 0px 10px -14px 14px #FFF;

You have a negative value for the shadow size:
box-shadow: 0px 10px -14px 14px #FFF;
A negative 14px shadow would be nothing, as it would be less than it having a size of 0. If you're looking for an inset shadow, simply add that to the style:
box-shadow: inset...
Solution, change -14px to 14px.

How to apply box-shadow on all four sides?

I'm trying to apply a box-shadow on all four sides. I could only get it on 2 sides:

It's because of x and y offset. Try this:
-webkit-box-shadow: 0 0 10px #fff;
box-shadow: 0 0 10px #fff;
edit (year later..): Made the answer more cross-browser, as requested in comments :)
btw: there are many css3 generator nowadays..
css3.me, css3maker, css3generator etc...

See: http://jsfiddle.net/thirtydot/cMNX2/8/
input {
-webkit-box-shadow: 0 0 5px 2px #fff;
-moz-box-shadow: 0 0 5px 2px #fff;
box-shadow: 0 0 5px 2px #fff;
}

Just simple as this code:
box-shadow: 0px 0px 2px 2px black; /*any color you want*/

This looks cool.
-moz-box-shadow: 0 0 5px #999;
-webkit-box-shadow: 0 0 5px #999;
box-shadow: 0 0 5px #999;

Understand box-shadow syntax and write it accordingly
box-shadow: h-offset v-offset blur spread color;
h-offset: Horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box - Required
v-offset: Vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box - Required
blur: Blur radius (The higher the number, the more blurred the shadow will be) - Optional
color: Color of the shadow - Optional
spread: Spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow - Optional
inset: Changes the shadow from an outer shadow to an inner shadow - Optional
box-shadow: 0 0 10px #999;
box-shadow works better with spread
box-shadow: 0 0 10px 8px #999;
use 'inset' to apply shadow inside of the box
box-shadow: 0 0 8px inset #999;
(or)
box-shadow: 0 0 8px 8px inset #999;
use rgba (red green blue alpha) to adjust the shadow more efficiently
box-shadow: 0 0 8px inset rgba(153, 153, 153, 0.8);
(or)
box-shadow: 0 0 8px 8px inset rgba(153, 153, 153, 0.8);

The most simple solution and easiest way is to add shadow for all four side. CSS
box-shadow: 0 0 2px 2px #ccc; /* with blur shadow*/
box-shadow: 0 0 0 2px #ccc; /* without blur shadow*/

I found the http://css-tricks.com/forums/topic/how-to-add-shadows-on-all-4-sides-of-a-block-with-css/ site.
.allSides
{
width:350px;height:200px;
border: solid 1px #555;
background-color: #eed;
box-shadow: 0 0 10px rgba(0,0,0,0.6);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.6);
-o-box-shadow: 0 0 10px rgba(0,0,0,0.6);
}

box-shadow: 0px 0px 4px 4px #000;
Where:
The first 2 values are the offset-x and offset-y of the shadow
The 3rd value - blur radius
The 4th value - spread radius
Else, you can generate a box-shadow online, using CSS box shadow generator

CSS3 box-shadow: 4 sides symmetry
each side with the same color
:root{
--color: #f0f;
}
div {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
box-sizing: border-box;
margin: 50px auto;
width: 200px;
height: 100px;
background: #ccc;
}
.four-sides-with-same-color {
box-shadow: 0px 0px 10px 5px var(--color);
}
<div class="four-sides-with-same-color"></div>
each side with a different color
:root{
--color1: #00ff4e;
--color2: #ff004e;
--color3: #b716e6;
--color4: #FF5722;
}
div {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
box-sizing: border-box;
margin: 50px auto;
width: 200px;
height: 100px;
background-color: rgba(255,255,0,0.7);
}
.four-sides-with-different-color {
box-shadow:
10px 0px 5px 0px var(--color1),
0px 10px 5px 0px var(--color2),
-10px 0px 5px 0px var(--color3),
0px -10px 5px 0px var(--color4);
}
<div class="four-sides-with-different-color"></div>
screenshots
refs
https://css-tricks.com/almanac/properties/b/box-shadow/
https://www.cnblogs.com/xgqfrms/p/13264347.html

Just simple as this:
box-shadow: 3px 3px 5px rgb(186 195 78), -3px -3px 5px rgb(186 195 78);

Use this css code for all four sides:
box-shadow: 0px 1px 7px 0px rgb(106, 111, 109);

You can different combinations at the following link.
https://www.cssmatic.com/box-shadow
The results which you need can be achieved by the following CSS
-webkit-box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);
box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);

Using (v1)px (v2)px (v3)px (v4)px as an example.
v1px when positive gives right side shadow whiles negative value gives left side shadow.
v2px when positive gives top side shadow whiles negative value gives bottom side shadow.
v3 is used for making the shadow blur. 10px will make shadow more blur than 5px and so on
So using a div (mydiv) with style below. We will get the image below
box-shadow:
30px 0px 5px 0px red,
0px 30px 5px 0px blue,
-30px 0px 5px 0px green,
0px -30px 5px 0px yellow;
width:200px;
height:200px;
margin-left:100px;
}
<br><br>
<div class="mydiv"></div>
This should give you the div below
view the result from this link: https://i.stack.imgur.com/bUjRN.jpg

Add this line to your box style.
box-shadow: 0 0 0 width color;
as example:
box-shadow: 0 0 0 5px yellow;
You can find more details here MDN Web Docs - Setting zero for offset and blur

Make the x and y offsets negative to apply the shadows on left and top sides of the container as well.
div { box-shadow: 1px 1px 1px 1px #BDBDBD, -1px -1px 1px 1px #BDBDBD; }
In the above code block,
1px 1px 1px 1px #BDBDBD is for adding shadows to the right and bottom sides.
-1px -1px 1px 1px #BDBDBD is for adding shadows to the top and left sides.

Resources