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>

Tópico de discussão no fórum: Div com cantos arredondados

css

Wiki Portugal-a-Programar

Ferramentas de Utilizador

Ferramentas de Site

Tabela de Conteúdos

Div com cantos arredondados

Solução 1

Estilo CSS

Código HTML para o Body

Solução 2

Ferramentas de Página