Zurb油墨，自定义类不工作

Question

我试图创建一个非常基本的通讯电子邮件的每周产品交易。我用的是Zurb墨水。我面临的问题是，一个自定义类的边框属性没有实现。CodePen链接是http://codepen.io/anon/pen/bNQWzX。

在产品类在线: 824。我已经定义了属性

.product {
      border-color: #0087bb;
      border: 3px solid;
      border-radius: 10px;
    }

但是，在标记中使用时，只实现了边框属性。半径和颜色被忽略了。

HTML标记在线: 932

<table class="six columns">
    <tr>
       <td class="center product">
         <img src="http://i.imgur.com/9xPFura.jpg" alt="Zedra Tap" width="250" height="250"/>
         <br/>
         Grohe Zedra Bath Tap - £20 OFF
         <br/>
         Was <strong>£99.99</strong> Now <strong class="nowprice">£79.99</strong>
         <br/>
                                                            <ul style="text-align:left">
                                                                <li>Contemporary Design</li>
                                                                <li>Availabe in Chrome Finish</li>
                                                                <li>Use for Kitchen</li>
                                                                <li><strong>Limited Stocks</strong></li>
                                                            </ul>
                                                            <a href="#" class="button">Buy Now</a>
                                                        </td>
                                                    </tr>
                                                </table>

请参阅代码笔上的完整标记。任何帮助都将不胜感激。提前谢谢

Answer 1

添加了@ZephyrusDigital的答案，这给了border-radius属性不起作用的主要原因。border-color属性正在被墨迹的主CSS中的某个类覆盖。但是，将!important添加到该属性使其正常工作。感谢你的时间。

Answer 2

我很确定这是因为由于td位于一个table中，它的边框总是正方形的。我认为您可以通过在div中使用这些样式来实现您想要的结果，但是请注意，无论如何只有少数客户端支持border-radius。

附带注意:将display:block;放在您的任何图像上。