2017-08-03 1 views
0

Ich habe einen Bootstrap-Knopf mit abgerundeten Ecken. Ich möchte den inneren Teil des Knopfes innerhalb der Grenze auch abgerundete Ecken anstelle eines Rechtecks ​​machen.Um abgerundete Ecken zum inneren Rand eines Knopfes zu haben

Dies ist meine Fiddle. Grundsätzlich möchte ich, dass die innere Grenze ähnlich wie die äußere schwarze Grenze ist, anstatt ein Rechteck zu sein.

HTML:

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button> 

CSS:

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited 
{ 
background-color: #00A0AF !important; 
background: linear-gradient(#00A0AF, #00ffff); 
} 
.btn-primary { 
border: 5px solid #000000; 
color: #000000; 
} 
+0

Mit elliptischen meinen Sie mit abgerundeten Ecken? –

+0

@ G.Hunt Ja Abgerundete Ecken ist angemessen. Ich möchte abgerundete Ecken an der inneren Grenze der schwarzen Grenze ähnlich wie die äußere Grenze. Habe meine Frage entsprechend bearbeitet. –

+1

Interessant, wie dein schwarzer Rand in einem '<>' Schnipsel hier verschwindet, es sei denn, ich füge hinzu! Wichtig zum Rand .... – mplungjan

Antwort

2

Die CSS border-radius Eigenschaft ist das, was Sie wollen.

Hinzufügen von border-radius: 10px; zu der .btn-primary Klasse wird es tun.

Demo here.

+1

Ich bin neugierig, warum der schwarze Rand nicht bei SO in den Schnipsel erscheint, wenn ich hinzufügen! Wichtig: '.btn-primäre { border: 5px solid # 000000! Wichtig; Farbe: # 000000; border-radius: 10px! Wichtig; } ' – mplungjan