Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Carlos Designer

Criando Div com bordas arredondadas e sombra

Por , em Desenvolvimento frontend

Recommended Posts

Carlos Designer    0

Carlos Designer
Postado

Já procurei alguns sites falando sobre como criar div's com bordas arrendodas, mas todos eram meio complicados, envolvendo até um pouco de javascript.

 

Dai desenvolvi um da minha propria maneira!

 

Pra quem quiser conferir

 

Depois é só ajusar de acordo com as imagens que vocês quiserem usar!

 

-->Preview

 

-->Código fonte

 

Testado no IE6, IE7, Firefox, Safari, Opera e Chrome

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Div com Bordas Arredondadas</title>
</head>
<style type="text/css" media="screen">
#container {
	width:400px;
	border:0px solid;
	height:100%;
}
#container p {
	margin-top:0px;
	margin-bottom:10px;
}
#topo {
	background:url(top.gif) center top;
	height:19px;
}
#center {
	background:url(center.gif) repeat-y center;
	overflow:auto;
}
#bottom {
	background:url(bottom.gif) no-repeat;
	height:15px;
}
#content {
	padding-left:20px;
	padding-right:20px;
	height:100%;
}
</style>
<body>
<div id="container">
  <div id="topo"></div>
  <div id="center">
	<div id="content">
	  <!--conteúdo aqui-->
	</div>
  </div>
  <div id="bottom"></div>
</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito