1

When using CSS3 border-radius property to create rounded corners how would one keep the content (text, images, etc.) from appearing over the top of the corner?

Example: Example

Might be hard to tell with this but I hope you guys understand the question.

Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
Aurange
  • 943
  • 2
  • 9
  • 23

2 Answers2

1

To keep the content inside of the box, you could use padding property:

.box {
  width: 400px;
  height: 250px;
  background-color: gold;

  border-radius: 20px;
  padding: 5px;  /* or */
                 /* padding-left: 10px */

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

box-sizing: border-box; is used to to calculate width and height of the element including padding and probable border.

Here is the JSBin Demo

Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
  • 1
    At first when you simply suggested padding I was thinking "well that works, but it messes with the sizing," but with box-sizing this is absolutely perfect. Thank you so much. – Aurange Aug 28 '13 at 21:14
0

I don't know if it will work in other browser but in Chrome you can just add:

overflow: hidden;

to the container and this will fix it. Here is a jsfiddle example of the overflow in action.

Wim Mostmans
  • 3,485
  • 1
  • 20
  • 20