圓角邊框無法用於HTML網站的CSS樣式表

Question

應顯示的內容：用aside元素制成的帶有圓角的邊框。 顯示的內容：具有正確輪廓顏色的方框邊框； 但是它們不是四舍五入的。

當我添加背景色時：aside元素的常規方形框輪廓內將出現一個帶有圓角的框。

這是與我要執行的操作相關的代碼。

      <section id="main">

         <aside>
            <p>The Grand Junction Neonatal Intensive Care Unit offers comprehensive neonatal 
               diagnostic and treatment facilities for critically ill newborns. We're dedicated 
               to providing the highest quality care for all newborns, ranging from healthy 
               neonates to sick or premature newborns requiring close observation or intensive care.
            </p>
            <p>All of the neonatologists are board certified. We believe it's critical that our 
               clinicians learn about the latest advances in neonatal intensive care to
               better serve the community of Grand Junction.
            </p>
         </aside>
      </section>

and now the styles:

/* Aside Styles */

aside {
    color: rgb(149, 91, 42);
    float: right;
    margin: 30px;      
    outline: 3px solid rgb(149, 91, 42);
    width: 50%;

    /* Rounded corners here. Not Working. Don't know why. Please give feedback. */
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    border-radius: 30px;
}

aside p {
    font-size: 90%;
    margin: 20px;
}

Answer 1

使用border代替outline 。 你近了！

請參閱： http ： //jsfiddle.net/wyxjtacg/

Answer 2

嘗試添加邊框：1px純黑色； 而不是“大綱”。