Clever Geek Handbook

Chrome (Webkit) bug: Border style with bounding radius

I have a chrome (and safari) problem, when I try to create a box with a dashed border and a border radius, the border width looks thinner.

This error appears when the border radius is set to 2px or more.

My code:

div {
  margin: 10px;
  padding: 10px;
}

.border {
  border: 1px dashed black;
}

.radius-1 {
  border-radius: 1px;
}

.radius-2 {
  border-radius: 2px;
}

.radius-10 {
  border-radius: 10px;
}
      

        
        
        
      

    
<body>
  <div class="border">
    No radius
  </div>
  <div class="border radius-1">
    radius 1px
  </div>
  <div class="border radius-2">
    radius 2px
  </div>
  <div class="border radius-10">
    radius 10px
  </div>
</body>
Run codeHide result


Any idea why and how I can fix this?

Thank:)

+3


source to share


1 answer


You can use em

:

.border {
  border: 0.1em dashed black;
}

      

        
        
        
      

    


div {
  margin: 10px;
  padding: 10px;
}

.border {
  border: 0.1em dashed black;
}

.radius-1 {
  border-radius: 1px;
}

.radius-2 {
  border-radius: 2px;
}

.radius-10 {
  border-radius: 10px;
}
      

        
        
        
      

    
<body>
  <div class="border">
    No radius
  </div>
  <div class="border radius-1">
    radius 1px
  </div>
  <div class="border radius-2">
    radius 2px
  </div>
  <div class="border radius-10">
    radius 10px
  </div>
</body>
Run codeHide result


0


source






More articles:


All Articles