Geek Answers Handbook

Content appears around the corner when using border radius

When using the CSS3 property border-radiusto create rounded corners, how do I save content (text, images, etc.) at the top of the corner?

Example: Example

It is impossible to say, but I hope you guys understand the question.

+1
source share
2 answers

To save content inside a field, you can use the property padding:

.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; used to calculate the width and height of an element, including padding and the likely border.

Here is the JSBin Demo

+1
source

I don’t know if it will work in another browser, but in Chrome you can simply add:

overflow: hidden;

, . jsfiddle .

0

More articles:


All Articles