Border Collapse without Tables

Sometimes bordered content must sit next to other bordered content. If each element uses border the borders will double. Consider using either outline or a box shadow to accomplish the same effect but without overlapping borders.

/* this might not go so well if another bordered element is next to it */
.thingy {
  border: 1px solid #DDDDDD;
}
/* rgba is great, but keep in mind that overlapping borders will be added together to create a darker shade */
.thingy {
  outline: 1px solid rgba(0, 0, 0, 0.1);
}
/* classic but works */
.thingy {
  outline: 1px solid #DDDDDD;
}
/* this works too */
.thingy {
  -moz-box-shadow: 0px 0px 0px 1px #DDDDDD;
  -webkit-box-shadow: 0px 0px 0px 1px #DDDDDD;
  box-shadow: 0px 0px 0px 1px #DDDDDD;
}

For more CSS tips, visit Semantic UI CSS Guide