CODEWITHSUNDEEP
cssgoogle-chromeprinting
Aalok Mishra
Aalok Mishra

Reputation: 196

Border-width changes if border-radius is greater when printing using chrome

I am trying to print a page on chrome. On rest of the browsers the page and print works fine but on chrome it breaks. The border-width is updated to border-radius value in print-preview mode. On screen this issue is not appearing. I have attached the screen grab of the same for reference.Scrren grab

The CSS code is as follows:

.tab {
position: relative;
width: 225px;
height: 60px;
border: solid 5px #e2e0e3;    
border-bottom-color: transparent;
border-bottom-width: inherit;
background-color: #FFFFFF;
border-radius: 25px 25px 0 0;    
display: inline-block;}
@media print {
   .tab{
      display: inline-block !important;
      border-radius: 15px 15px 0 0!important;
      border-width: 5px !important;                 
   }
}

Upvotes: 2

Views: 755

Answers (1)

Aalok Mishra
Aalok Mishra

Reputation: 196

It's been a while I posted this question. I have figured out the reason for this on my own.

The main culprit behind this issue was having the bottom border width as 0px. The reason being, in print mode, the border radius can not work until all borders are of same width & are visible. If any one of the borders is not visible/none, it will break the UI in preview mode & while printing. Since there were no possible solutions available to it, I just made the bottom border visible for the print mode & kept it none on browser. I get it that this is not a true solution but sometimes, you just have to go with it.

Cheers

Upvotes: 2

Related Questions