CODEWITHSUNDEEP
css
Alexa Green
Alexa Green

Reputation: 1183

How To Fix CSS Border Radius From Cutting Off Border Corners

As You can see in this image I applied the border-radius property to a div and now it cuts off the corners on the border property. What's the best way to fix this?

screenshot

.store1,.store2,.store3,.store4,.store5 {
width: 160px;
padding: 5px;
margin: 5px 0 10px 0;
border: 4px solid #FFFFFF;
height: 70px;
overflow: hidden;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #FFFFFF;
display: inline-block;
font-style: none;   
color: #000000;
font-style: normal;
text-align: center;
}

Upvotes: 2

Views: 6482

Answers (1)

Nate B
Nate B

Reputation: 6356

You need to set the top, left, and right borders to 0 instead of just setting it the same color as your background. Then, your bottom border will run all the way to the edge.

Example JSFiddle here.

Upvotes: 1

Related Questions