html - Content appears over a corner when using border-radius -


when using css3 border-radius property create rounded corners how 1 keep content (text, images, etc.) appearing on top of corner?

example: example

might hard tell hope guys understand question.

to keep content inside of box, 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; used to calculate width , height of element including padding , probable border.

here jsbin demo


Comments

Popular posts from this blog

Unable to remove the www from url on https using .htaccess -