Page Widget How to - Work border-radius with border and padding

Question

We would like to know how to work border-radius with border and padding.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.border-radius{<!--from  w w  w. j  ava 2 s. c  om-->
    display:inline-block;
    position:relative;
    padding:2px;
    border:2px solid #888;
    border-radius:20px;
    background-color:#ccc;
}
.border-radius div{
    background-color:#333;
}
.float{
    margin:3px;
    float:left;
}
.overflow{overflow:hidden;}
  </style>
</head>
<body>
  <div class=float>
    <div class="border-radius overflow float"><div>java2s.com</div></div>
    <div class="border-radius overflow float"><img src="http://www.java2s.com/style/download.png"></div>
</div>

</body>
</html>

The code above is rendered as follows: