Rounded box without image and CSS3

Most of the HTML developers looking for rounded box, without any images and even the CSS3 property. See all browsers supported rounded corner box HTML and CSS.

•

•

•

•

Welcome to our website!
Learn HTML, CSS, Javascript, Wordpress etc

CSS Code:

<style>
div.rounded-box {
width: 500px;
height:200px;
background: #ebebeb;
position:relative;
}
div.top-left-corner, div.bottom-left-corner,
div.top-right-corner, div.bottom-right-corner
{position:absolute; width:20px; height:20px;
background:#FFF; overflow:hidden;}
div.top-left-inside, div.bottom-left-inside,
div.top-right-inside, div.bottom-right-inside
{position:relative; font-size:150px; font-family:arial;
color:#ebebeb; line-height: 40px;}
div.top-left-corner { top:0px; left:0px; }
div.bottom-left-corner {bottom:0px; left:0px;}
div.top-right-corner {top:0px; right:0px;}
div.bottom-right-corner {bottom: 0px; right:0px;}
div.top-left-inside {left:-8px;}
div.bottom-left-inside {left:-8px; top:-17px;}
div.top-right-inside {left:-25px;}
div.bottom-right-inside {left:-25px; top:-17px;}
div.box-contents {
position: relative; padding: 8px; color:#000;
}
</style>

HTML Code:

<div class="rounded-box">
<div class="top-left-corner">
<div class="top-left-inside">
&bull;
</div>
</div>
<div class="bottom-left-corner">
<div class="bottom-left-inside">
&bull;
</div>
</div>
<div class="top-right-corner">
<div class="top-right-inside">
&bull;
</div>
</div>
<div class="bottom-right-corner">
<div class="bottom-right-inside">
&bull;
</div>
</div>
<div class="box-contents">
Welcome to our website! <br />
Learn HTML, CSS, Javascript, Wordpress etc
</div>
</div>