CSS dotted borders in SharePoint

One obstacle to over come in Internet Explorer is that it incorrectly shows dashed borders instead of dotted borders. To hack around this issue, create an image 2px by 2px with a single dot in the lower left corner.

Add the following rule to your stylesheet:

 

  .className {
                  margin: 0;
                  padding: 0;
                  border-bottom: 1px dotted #HexValueOfDot;
                }

Browsers, like Mozilla that are capable of implementing a dotted line will adhere to the above CSS rule. To apply the dotted line in Internet Explorer, add the following rule below it.

 

  * html .className {
                  background: url(/image/css-dotted-line.gif) repeat-x bottom;
                  padding: 1px;
                  border-bottom: none;
                  }

Internet Explorer requires a height value to apply the background image, however when you add height: 1px; Internet Explorer ignored the specified 1px. To work around this issue, the padding contains the height value therefore not allowing Internet Explorer to change the size.