border: 10px solid rgba(0,0,0,0.3); box-shadow

border: 10px solid rgba(0,0,0,0.3);

The properties that can be set, are (in order):

  • border-width,
  • border-style, and
  • border-color.

It does not matter if one of the values above are missing, e.g. border:solid #ff0000; is allowed.


Value Description Play it
none Specifies no border Play it »
hidden The same as “none”, except in border conflict resolution for table elements Play it »
dotted Specifies a dotted border Play it »
dashed Specifies a dashed border Play it »
solid Specifies a solid border Play it »
double Specifies a double border Play it »
groove Specifies a 3D grooved border. The effect depends on the border-color value Play it »
ridge Specifies a 3D ridged border. The effect depends on the border-color value Play it »
inset Specifies a 3D inset border. The effect depends on the border-color value Play it »
outset Specifies a 3D outset border. The effect depends on the border-color value Play it »
inherit Specifies that the border style should be inherited from the parent element
  • border-style:dotted solid double dashed;
    • top border is dotted
    • right border is solid
    • bottom border is double
    • left border is dashed
  • border-style:dotted solid double;
    • top border is dotted
    • right and left borders are solid
    • bottom border is double
  • border-style:dotted solid;
    • top and bottom borders are dotted
    • right and left borders are solid
  • border-style:dotted;
    • all four borders are dotted

color: #b14943;
cursor: pointer;
border-bottom: 1px dashed #b14943;


box-shadow:1px 1px 3px rgba(0,0,0,0.6);

box-shadow: h-shadow v-shadow blur spread color inset;

  • The horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box.
  • The vertical offset of the shadow, a negative one means the box-shadow will be above the box, a positive one means the shadow will be below the box.
  • The blur radius (optional), if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.
  • The spread radius (optional), positive values increase the size of the shadow, negative values decrease the size. Default is 0 (the shadow is same size as blur).
  • Color

Inner Shadow

.shadow {
   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;

One-Side Only

Using a negative spread radius, you can get squeeze in a box shadow and only push it off one edge of a box.

.one-edge-shadow {
	-webkit-box-shadow: 0 8px 6px -6px black;
	   -moz-box-shadow: 0 8px 6px -6px black;
	        box-shadow: 0 8px 6px -6px black;



Just another site

Jing's Blog

Just another site

Start from here......







Just another site

Where On Earth Is Waldo?

A Project By Melanie Coles

the Serious Computer Vision Blog

A blog about computer vision and serious stuff

Cauthy's Blog

paper review...

Cornell Computer Vision Seminar Blog

Blog for CS 7670 - Special Topics in Computer Vision


Life through nerd-colored glasses

Luciana Haill

Brainwaves Augmenting Consciousness



Dr Paul Tennent

and the university of nottingham

turn off the lights, please

A bunch of random, thinned and stateless thoughts around the Web