Div com cantos arredondados
Solução 1
Estilo CSS
html {
height:100%;
margin-bottom:1px;
}
body {
font-family:Arial, Tahoma, Verdana, sans-serif;
font-size: 100%;
font-weight: 400;
background-color: #808080;
text-align: center;/* centraliza a caixa de texto primeira parte */
margin: 0;
padding: 0;
}
div#round {
width: 350px;
text-align: left;
margin: 10px auto 10px;/* centraliza a caixa de texto segunda parte */
padding: 0;
}
div#round p {
font-size: 100%;
font-weight: 400;
color: #ffffff;
background: red;
margin: 0;
padding: 10px;
}
b.rtop, b.rbottom {
display: block;
background: #808080; /*cor branca*/
}
b.rtop b, b.rbottom b{
display: block;
height: 1px;
overflow: hidden;
background: red;
}
b.r1 {margin:0 5px;}
b.r2 {margin:0 3px;}
b.r3 {margin:0 2px;}
b.rtop b.r4, b.rbottom b.r4 {
margin: 0 1px;
height: 2px;
}
Código HTML para o Body
<div id="round">
<!-- cantos de cima-->
<b class="rtop">
<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b>
</b>
<p><a href="javascript:history.back(-1)">voltar</a></p>
<p>Algum conteúdo</p>
<!-- cantos de baixo -->
<b class="rbottom">
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>
</b>
</div>
Solução 2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Round corners</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
text-align: center;
margin: 0;
padding: 0;
}
div#box {
width: 350px;
text-align: left;
margin: 20px auto 0px;
}
.round span{
display: block;
background: red;
overflow: hidden;
}
.round .r1 {margin:0 5px; height: 1px;}
.round .r2 {margin:0 3px; height: 1px;}
.round .r3 {margin:0 2px; height: 1px;}
.round .r4 {margin:0 1px; height: 2px;}
.conteudo {
background:red;
overflow:hidden;
padding:10px;
}
</style>
</head>
<body>
<div id="box">
<!-- cantos de cima-->
<div class="round">
<span class="r1"></span>
<span class="r2"></span>
<span class="r3"></span>
<span class="r4"></span>
</div>
<!-- conteudo -->
<div class="conteudo">
<p><a href="javascript:history.back(-1)">voltar</a></p>
<p>Algum conteúdo</p>
</div>
<!-- cantos de baixo -->
<div class="round">
<span class="r4"></span>
<span class="r3"></span>
<span class="r2"></span>
<span class="r1"></span>
</div>
</div>
</body>
</html>