패널의 텍스트 버튼의 곡선 가장자리를 제거하고 조정

Question

나는 상단과 하단 버튼의 제거 곡선 가장자리 생각할 수있는 모든 노력을했지만 그들이 작동하지 않습니다

JS FIDDLE DEMO

. 나는이 시도 :

.btn { 
    border-radius: 0; 
    font-size:25px; 
    padding:0; 
} 

을하지만 이것은 단지 이전과 이후, 곡선 가장자리의 일부를 제거합니다

그리고 한가지 더 패널, 난 패널의 높이를 설정하려고했으나 이제 텍스트는 수평 및 수직 센터에 배치되지 않습니다

.panel-title { 
    height:8px !important; 
} 

은 어떻게 그 2 가지 문제를 해결할 수 있습니까? 고마워!

P/s : 내가 묻는 이래로, 나는 또한 당신의 의견을 듣고 싶어합니다. 또는 사이트를 만드는 데 도움이되는 팁은 https://www.behance.net/gallery/6355085/dashboard-analytics입니다. 나는이 아이디어 다음 사이트를 만들하지만 난 내 엉망 :(

Answer 1

처럼 보이기 때문에 당신이 경우 CSS를에이

.btn-group-vertical>.btn:first-child:not(:last-child) { 
    border-top-right-radius: 0px; 
} 

DEMO

Answer 2

!important 추가 추가 할 일도없는 것 같아 반경을 어디에서나 제거하고 싶지는 마십시오.

피들 : http://jsfiddle.net/ettmujvg/20/

CSS는 : 첫 번째와 마지막 아이

body { 
    background-color:#444444; 
} 

.panel{ 
    border-radius: 0 !important; // <--- HERE 
} 
.btn { 
    border-radius: 0 !important; // <--- HERE 
    font-size:25px; 
    padding:0; 
} 

.btntext{ 
    padding:0; 
    font-size:14px !important; 
    font-weight:bold; 
} 
.btn-default { 
     color:black !important; 
} 
.btn-custom { 
    width: 100px !important; 
    margin-top:0px !important; 
    background-image:linear-gradient(to right, #FFF 0px, #E0E0E0 100%) !important; 
} 

.btn-custom a{ 
    color:#333 !important; 
} 

.pHeader-panel { 
    margin-bottom : 0px; 
    height:25px; 
    text-align:center; 
    background-image:linear-gradient(to left, #FFF 0px, #E0E0E0 100%) !important; 
} 

.panel-heading { 
    background-image:linear-gradient(to top, #FFF 0px, #E0E0E0 100%) !important; 
} 


.panel-title { 
    height:8px !important; 
} 

#pHeader 
{ 
    position: fixed; 
    width: 100%; 
    top:0px; 
} 

#pLeftMenu { 
    position: fixed; 
    top: 25px; 
} 

#pBody { 
    margin-top:30px; 
    margin-left:105px; 
    padding-right:8px; 
} 

#halfHorizontalPanel { 
    margin-left:0px; 
    margin-right:0px; 
    background-color:white; 
    border:1px solid; 
    min-height:300px; 
} 

#lefthalfHorizontalPanel{ 
    margin:8px 0px; 
    margin-right:0px; 
    width:49.5%; 
    background-color:white; 
    border:1px solid; 
    min-height:290px; 
    float:left; 
} 


#righthalfHorizontalPanel{ 
    margin:8px 0px; 
    width:49.5%; 
    background-color:white; 
    border:1px solid; 
    min-height:290px; 
    float:right; 
} 


.btn-group-vertical-custom 
{ 
    margin-top:0px !important; 
} 

.tbl-stair { 
    border:1px solid; 
} 

Answer 3

확인 당신이 부트 스트랩에. 이것은 당신의 바이올린에서 온 것입니다.

.btn-group-vertical > .btn:first-child:not(:last-child) { 
     border-top-right-radius: 4px; 
     border-bottom-right-radius: 0px; 
     border-bottom-left-radius: 0px; 
    } 

보시다시피 테두리 반경이 있습니다. 코드 관리자 또는 비슷한 요소를 사용하여 요소에 적용된 클래스를 확인하십시오.