How can I remove/cover up a section of a border? - html

Question

How can I remove/cover up the 14px of border to the right of main_right_article_pic.png?
HTML:
<div class="main_right_article">
<span class="main_right_article_left">
<img src="img/main_right_article_pic.png" width="54" height="54" alt="Joe Bloggs">
</span>
<article>
<h4>Joe Bloggs</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis fringilla mi quis sollicitudin. Maecenas orci diam, congue eget sodales nec, facilisis eu eros.</p>
</article>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
body
{
font-family: 'Open Sans', sans-serif;
}
div.main_right_article
{
clear: both;
float: left;
margin-top: 25px;
width: 425px;
}
span.main_right_article_left
{
float: left;
background: url("../img/article_mark.png") no-repeat right 20px;
height: 54px;
width: 73px;
}
article
{
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background-color: #f1f1f1;
border: 1px solid #c9c9ca;
float: right;
padding: 10px;
width: 330px;
}
article h4
{
font-size: 14px;
font-weight: 600;
margin-bottom: 10px;
text-shadow: 1px 1px 1px rgba(21, 21, 21, 0.3);
}
article p
{
font-size: 12px;
}

Answer 1

You can avoid this issue with a tooltip in CSS.
See: http://csstooltip.com

Answer 2

This is how I did it:
CSS:
span.main_right_article_left
{
float: left;
height: 54px;
width: 54px;
}
span.main_right_article_mark
{
background-image: url("../img/article_mark.png");
float: left;
height: 14px;
position: relative;
right: -6px;
top: 20px;
width: 14px;
}
HTML:
<div class="main_right_article">
<span class="main_right_article_left std_pic">
<img src="img/main_right_article_pic.png" width="54" height="54" alt="Joe Bloggs">
</span>
<span class="main_right_article_mark"> </span>
<article>
<h4>Joe Bloggs</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis fringilla mi quis sollicitudin. Maecenas orci diam, congue eget sodales nec, facilisis eu eros.</p>
</article>
</div>