This is a migrated thread and some comments may be shown as answers.

Header CSS borders

1 Answer 97 Views
Card
This is a migrated thread and some comments may be shown as answers.
CHRISTOPHER
Top achievements
Rank 1
CHRISTOPHER asked on 30 Sep 2019, 03:05 PM

I am using the material theme and here is my adjusted kendo.common.css to get rid of border radius that used to be 4px but I've switched to 0px.  I'm attempting to get rid of the slanted borders in the header and footer of the card as shown in the attached image.  I just wanted a standard flush border instead of the 45 degree angle cut off.

 

What do I need to change in the CSS to get this to work right?

 

.k-card{border-radius:0px;border-width:1px;border-style:solid;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden}
.k-card.k-card-flat{box-shadow:none}
.k-card-header{padding:4px 8px;border-width:0 0 1px;border-style:solid;overflow:hidden}
.k-card>.k-card-header:first-child{border-top-left-radius:0px;border-top-right-radius:0px}
.k-card>.k-card-header:last-child{border-bottom-right-radius:0px;border-bottom-left-radius:0px}
.k-card-header>h1,.k-card-header>h2,.k-card-header>h3,.k-card-header>h4,.k-card-header>h5,.k-card-header>h6{margin:0}
.k-card-body{padding:8px 8px;-ms-flex:1 1 0px;flex:1 1 0}
.k-card>.k-card-body:first-child{border-top-left-radius:0px;border-top-right-radius:0px}
.k-card>.k-card-body:last-child{border-bottom-right-radius:0px;border-bottom-left-radius:0px}
.k-card-body p{margin:0 0 8px}
.k-card-body>.k-last,.k-card-body>:last-child{margin-bottom:0}
.k-card-image{border:0;max-width:100%;overflow:hidden}
.k-card>.k-card-image:first-child{border-top-left-radius:0px;border-top-right-radius:0px}
.k-card>.k-card-image:last-child{border-bottom-right-radius:0px;border-bottom-left-radius:0px}
.k-card-image>img{border:0;max-width:100%}
.k-card-title{margin:0 0 8px}
.k-card-subtitle{margin:0 0 8px}
.k-card-title+.k-card-subtitle{margin-top:-6px}
.k-card>.k-hr{margin:0;-ms-flex:0 0 auto;flex:0 0 auto;border-color:inherit}
.k-card-actions{padding:8px 8px;border-width:0;border-style:solid;border-color:inherit;overflow:hidden;-ms-flex-negative:0;flex-shrink:0;-ms-flex-preferred-size:auto;flex-basis:auto}
.k-card>.k-card-actions:first-child{border-top-left-radius:0px;border-top-right-radius:0px}
.k-card>.k-card-actions:last-child{border-bottom-right-radius:0px;border-bottom-left-radius:0px}
.k-card>.k-card-actions{border-top-width:1px;border-color:inherit}
.k-card-actions>.k-button.k-flat:first-child{margin-left:-8px}
.k-card-action{border-width:0;border-style:solid;border-color:inherit;display:-ms-inline-flexbox;display:inline-flex;-ms-flex:1 1 auto;flex:1 1 auto}
.k-card-action>.k-button{border-radius:0;padding:12px 8px;-ms-flex:1 1 auto;flex:1 1 auto}
.k-card-actions-vertical{padding:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}
.k-card-actions-vertical .k-card-action+.k-card-action{border-top-width:1px}
.k-card-actions-stretched{padding:0;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}
.k-card-actions-stretched .k-card-action+.k-card-action{border-left-width:1px}
.k-card-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:stretch;align-items:stretch;-ms-flex:0 0 auto;flex:0 0 auto}
.k-card-list .k-card{-ms-flex:0 0 auto;flex:0 0 auto}
.k-card-list .k-card+.k-card{margin-top:16px}
.k-card-deck{display:-ms-flexbox;display:flex;margin-top:16px;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:stretch;align-items:stretch;-ms-flex:0 0 auto;flex:0 0 auto}
.k-card-deck .k-card{-ms-flex:0 0 auto;flex:0 0 auto}
.k-card-deck .k-card+.k-card{margin-left:16px}
.k-card-deck-scrollwrap{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center}
.k-card-deck-scrollwrap>.k-button{border-radius:0;-ms-flex:0 0 auto;flex:0 0 auto;position:absolute}
.k-card-deck-scrollwrap>.k-button:first-child{left:-1px}
.k-card-deck-scrollwrap>.k-button:last-child{right:-1px}
.k-card-deck-scrollwrap>.k-card-deck{-ms-flex:1 1 auto;flex:1 1 auto}
.k-card-group{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:stretch;align-items:stretch;-ms-flex:0 0 auto;flex:0 0 auto}
.k-card-group .k-card{border-radius:0;-ms-flex:0 0 auto;flex:0 0 auto}
.k-card-group .k-card>.k-card-header{border-radius:0}
.k-card-group .k-card+.k-card{margin-left:-1px}
.k-card-group .k-card.k-first{border-bottom-left-radius:0px;border-top-left-radius:0px}
.k-card-group .k-card.k-first>.k-card-header{border-top-left-radius:0px}
.k-card-group .k-card.k-last{border-top-right-radius:0px;border-bottom-right-radius:0px}
.k-card-group .k-card.k-last>.k-card-header{border-top-right-radius:0px}
.k-card-group .k-card.k-only{border-radius:0px}
.k-card-group .k-card.k-only>.k-card-header{border-top-left-radius:0px;border-top-right-radius:0px}

1 Answer, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 02 Oct 2019, 11:05 AM

Hello Christopher,

On the following Dojo example you could find a simple cards demo where the border-radius of all cards is set to 0 with the following CSS:

<style>
  .k-card,
  .k-card>.k-card-header:first-child { 
    border-radius: 0; 
  }
</style>

Could you try the above example and let me know if this achieves the desired result? 

I am looking forward to hearing from you.

Regards,
Dimitar
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Card
Asked by
CHRISTOPHER
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Share this question
or