border

Border is shorthand for all the width, style, color and radius of the top, right, bottom and left borders. Only style is required, as border defaults to medim width, font color and style of 'none', and radius to zero.

• border-bottom - border-bottom: thick;
• border-left - border-left: groove
• border-right - border-right:double
• border-top - border-top:inset
• border: 5px groove #0000ff 10px;
• border: 5px groove #0000ff;

border-color

Border color is the shorthand for declaring the colors of the four sides of a box.

All browsers support border color, along with the non short hand versions:

• border-bottom-color: #ff0000
• border-left-color: rgba(255,0,0,0.5)
• border-right-color: silver
• border-top-color: transparent

However, not all browsers support all color declarations. For a more comprehensive understanding of the different color declarations, i will be providing a separate post. Here is a quick view of the different border color declarations. New in CSS3 include hsla(), rgba() and the keyterms 'currentColor':

• border-color: rgb(255,0,0)
• border-color: #123def
• colorName - border-color: green
• border-color: transparent
• border-color: inherit
• border-color: currentColor
• rgb() - border-color: rgb(45,212, 63) rgb(18, 255, 44) rgb(212, 45, 63) rgb(18,44,255)
• rgba() 0 border-color: rgba(45,212, 63, 0.3) rgba(18, 255, 44, 0.1) rgba(212, 45, 63, 0.3) rgba(18,44,255, 0.1)
• hsl
• hsla
• typo

border-style

All browsers support border-style, along with the non short hand versions border-bottom-style, border-left-style, border-right-style, and border-top-style. However, not all browsers support all styles, and those that do suppor a style don't render identically. Here is a quick view of the different border color declarations. There are no new border-style values in CSS3, but there are different ways of stylizing borders with properties such as border-radius and border-image:

• dashed
• dotted
• double
• groove
• hidden
• inset
• none
• outset
• ridge
• solid
• typo

border-width

All browsers support border-style, along with the non short hand versions border-bottom-width, border-left-width, border-right-width, and border-top-width.Here is a quick view of the different border width declarations. There are no new border-width values in CSS3:

• thin
• medium
• thick
• length (3px)

border-collapse

Border collapse applies to tables, defining the table's border model. The value 'separate' selects the separated borders border model. The value 'collapse' selects the collapsing borders model. The models are described below. separate: borders are detached (standard HTML). collapse: Borders are collapsed, where adjacent, into a single border.

• border: collapse
  hello	hello
  hello	hello

• border: separate
  hello	hello
  hello	hello

• border: inherit
  hello	hello
  hello	hello

border-image

border images is a shorthand property for ‘border-image-source’, ‘border-image-slice’, ‘border-image-width’, ‘border-image-outset’, ‘border-image-repeat'. Interestingly some browsers don't support the individual properties, even though they support the shorthand.

• -vendor-border-image:url(images/borderimage.gif) 5 / 5px stretch
• border-image:url(images/borderimage.gif) 5 5 / 5px 20px 0 0 round round;
• border-image:url(images/borderimage.gif) 5 5 / 5px 20px 0 0 stretch;
• border-image:url(images/borderimage.gif) 5 5 / 5px 20px 0 0 space;
• border-image:url(images/borderimage.gif) 5 5px stretch

border-image-outset

• length {1,4}

border-image-repeat

• stretch
• repeat - here
• round
• space

border-image-slice

• length{1,4}
• fill

border-image-source

• url(http://www.standardista.com/wp-content/themes/green/img/avatar.png)
• none

border-image-width

• length ({1,4}
• auto

<percentage> values are a Mozilla extension and not supported by Safari/WebKit. # Safari/WebKit supports only one value for all 4 corners. For different radii the long form properties must be used. # Safari/WebKit doesn't support the slash / notation. If two values are specified, an elliptical border is drawn on all 4 corners.">border-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-left-radius

• -moz-border-radius: 10px / 40px; -webkit-border-radius: 10px/ 30px; border-radius: 10px / 40px;
• -moz-border-radius-topleft: 15px; -webkit-border-top-left-radius: 15px; border-top-left-radius: 15px;
• -moz-border-radius-topleft: 15px/30px; -webkit-border-top-left-radius: 15px 30px; border-top-left-radius: 15px/30px;

box-shadow

• inset lngth lngth lngth color
• lngth lngth lngth color
• none
• (mulitple shadows)

border-spacing

• length
• length length
• inherit

border-break

• border-width odo, ipsum erat molestie purus, nec dictum turpis mi at nunc. Quisque fermentum tristique tortor in iaculis. Praesent pulvinar eros quis tellus gravida vitae porta nulla dapibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas vitae arcu massa. Fusce iaculis gravida dolor vitae elementum. Proin ligula nibh, pulvinar sed pharetra et, sagittis sed velit. Cras posuere pulvinar imperdiet. Suspendisse tincidunt gravida magna, sit amet luctus justo pretium sed. Sed feugiat purus vitae enim egestas non fermentum eros varius. Donec ac imperdiet eros. Nulla facilisi. Mauris eget justo non neque laoreet ultricies p
• border-style odo, ipsum erat molestie purus, nec dictum turpis mi at nunc. Quisque fermentum tristique tortor in iaculis. Praesent pulvinar eros quis tellus gravida vitae porta nulla dapibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas vitae arcu massa. Fusce iaculis gravida dolor vitae elementum. Proin ligula nibh, pulvinar sed pharetra et, sagittis sed velit. Cras posuere pulvinar imperdiet. Suspendisse tincidunt gravida magna, sit amet luctus justo pretium sed. Sed feugiat purus vitae enim egestas non fermentum eros varius. Donec ac imperdiet eros. Nulla facilisi. Mauris eget justo non neque laoreet ultricies p
• color odo, ipsum erat molestie purus, nec dictum turpis mi at nunc. Quisque fermentum tristique tortor in iaculis. Praesent pulvinar eros quis tellus gravida vitae porta nulla dapibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas vitae arcu massa. Fusce iaculis gravida dolor vitae elementum. Proin ligula nibh, pulvinar sed pharetra et, sagittis sed velit. Cras posuere pulvinar imperdiet. Suspendisse tincidunt gravida magna, sit amet luctus justo pretium sed. Sed feugiat purus vitae enim egestas non fermentum eros varius. Donec ac imperdiet eros. Nulla facilisi. Mauris eget justo non neque laoreet ultricies p
• closeodo, ipsum erat molestie purus, nec dictum turpis mi at nunc. Quisque fermentum tristique tortor in iaculis. Praesent pulvinar eros quis tellus gravida vitae porta nulla dapibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas vitae arcu massa. Fusce iaculis gravida dolor vitae elementum. Proin ligula nibh, pulvinar sed pharetra et, sagittis sed velit. Cras posuere pulvinar imperdiet. Suspendisse tincidunt gravida magna, sit amet luctus justo pretium sed. Sed feugiat purus vitae enim egestas non fermentum eros varius. Donec ac imperdiet eros. Nulla facilisi. Mauris eget justo non neque laoreet ultricies p

box-decoration-break

• CLONE. Non-prefixed. closeodo, ipsum erat molestie purus, nec dictum turpis mi at nunc. Quisque fermentum tristique tortor in iaculis. Praesent pulvinar eros quis tellus gravida vitae porta nulla dapibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas vitae arcu massa. Fusce iaculis gravida dolor vitae elementum. Proin ligula nibh, pulvinar sed pharetra et, sagittis sed velit. Cras posuere pulvinar imperdiet. Suspendisse tincidunt gravida magna, sit amet luctus justo pretium sed. Sed feugiat purus vitae enim egestas non fermentum eros varius. Donec ac imperdiet eros. Nulla facilisi. Mauris eget justo non neque laoreet ultricies p
• CLONE. Prefixed. closeodo, ipsum erat molestie purus, nec dictum turpis mi at nunc. Quisque fermentum tristique tortor in iaculis. Praesent pulvinar eros quis tellus gravida vitae porta nulla dapibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas vitae arcu massa. Fusce iaculis gravida dolor vitae elementum. Proin ligula nibh, pulvinar sed pharetra et, sagittis sed velit. Cras posuere pulvinar imperdiet. Suspendisse tincidunt gravida magna, sit amet luctus justo pretium sed. Sed feugiat purus vitae enim egestas non fermentum eros varius. Donec ac imperdiet eros. Nulla facilisi. Mauris eget justo non neque laoreet ultricies p