Круглые углы контура собственности CSS

Question

Я этот элемент с этим стилем добавил:

.checkout-step.current .number { 
    background-color: #d26d51; 
    outline: 1px solid #d26d51; 
    outline-offset: 4px; 
} 

Но я не хочу, квадратные углы в общих чертах, я хочу закругления углов, как в этом примере :

Как это сделать?

Answer 1

Мой подход заключается в следующем. Пожалуйста, проверьте JSFiddle. Я добавил следующий HTML.

<a href="#">2</a> 

Я добавил следующее css.

a { 
    background: #999; 
    width: 40px; 
    height: 40px; 
    border-radius: 20px; 
    text-decoration: none; 
    color: #fff; 
    display: inline-block; 
    line-height: 40px; 
    position: relative; 
    border: 2px solid #000; 
    text-align: center; 
} 
a:after { 
    content: ''; 
    display: block; 
    position: absolute; 
    top: -10px; 
    bottom: -10px; 
    left: -10px; 
    right: -10px; 
    border-radius: 30px; 
    border: 2px solid #f00; 
} 

Answer 2

Используйте свойство border-radius для этого. http://www.w3schools.com/cssref/css3_pr_border-radius.asp

Answer 3

** использовать этот код **
контура мы не можем использовать свойство радиуса вместо контура сделать как границы и радиус, так что я изменил код, как это попробовать это.

Html

<div class="usecode"><div class=".checkout-step.current .number">2</div></div> 

CSS

.checkout-step.current .number { 
     background-color: #d26d51; 
    margin:15px; 

     } 

.usecode 
{ 
border:1px solid #d26d51; 
border-radius:25px !important; 
}