Header CSS borders

2 posts, 0 answers
  1. CHRISTOPHER
    CHRISTOPHER avatar
    9 posts
    Member since:
    Jul 2017

    Posted 30 Sep 2019 Link to this post

    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}

  2. Dimitar
    Admin
    Dimitar avatar
    710 posts

    Posted 02 Oct 2019 Link to this post

    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.
Back to Top