This is a paragraph that has been styled with “color: red”. This is an abbreviation – assoc. and this is an acroynm – OPAC.

This is a paragraph that has been styled with “color: blue”. This is an abbreviation – assoc. and this is an acroynm – OPAC.

abbr, acronym
{
   border-bottom: .1em dotted;
   cursor: help;
}

The abbr and acronym elements do not have a color value specified for the border-bottom property. As no color is specified, the border-bottom color uses the color value instead. As you can see, the border-bottom color is taken from the color of the parent element.