Solve the problem that the border-radius background color exceeds the rounded corner

SPAN {display: block; Background: # f4f4f4; color: #333; font-size: 14px;-WebKit-border-radius: 20px; border-radius: 20px; text-align: center; Height: 32px; line-Height: 32px; margin-Right: 10px; padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 4em ;}. span1 {/* the background color in m7007 will exceed the rounded corner border: 1px solid # ededed; */Border: 1px solid # ededed ;}. span2 {border: none; box-Shadow: 0 0 0 1px # ededed ;}

<Br> <SPAN class = "span1"> some text </span> <br> <SPAN class = "span2"> some text </span>

On m7007:

The background color of the first span is beyond the scope defined by border-radius.

Possible explanations:

Border-radius defines the rounded corner of the border. The range of rounded corners of the span is not defined.

To:

If border is not set, border-radius takes effect for the entire span. Add box-shadow to implement the border effect