Border CSS Tips

Border is what surrounds your html/css object/item, let it be a text, an empty box, or an image .. etc

Border has four properties:



Whether you choose for your border to be visible or not, bear in mind it's made up of four parts:

The border properties have different ways to write down their values, but I always use a fixed/limited way:

color: #------; --> border color
width: --px; --> border thickness
style: solid, dashed, dotted; --> border appearance
radius: --px; -->border corner

Thus you can consider your border to be one entity and give it one value for each property .. e.g:
border-width:3px;

Or consider the four parts and give each its own value .. e.g:
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;

An example for a short way to write it is:
border-width: 1px 2px 3xp 4xp;

This way top border will be 1px
This way right border will be 2px
This way bottom border will be 3px
This way left border will be 4px

The chit chat above was a quick overlook of what I think is important about borders .. From down below you'll see some live examples of how interesting a border can be .. the code will be written inside the border!

border-left:2px dotted #CC6633;

  .shadow-holder {
  background: #CC9966;
  border: #996600 1px solid;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -webkit-box-shadow: 0px 1px 3px 1px #CC9966;
  box-shadow: 0px 1px 3px 1px #CC9966;
  -moz-box-shadow: 0px 1px 3px 1px #CC9966;
  margin: 6px;
  padding: 6px;
}

.shadow-holder:hover {
  background: #FFCC99;
}

.arrow {
  border-color: transparent black;
  border-style: solid;
  border-width: 20px 0px 20px 20px;
  height: 0px;
  width: 0px;
}

.circle {
  background: #FFCC99;
  border-radius: 60px;
  height: 50px;
  width: 50px;
}

More examples to come soon ^___^