Autor Tema: CSS estilos de bordes border-right border-left border-top border-bottom CU01027D (Leído 2219 veces)

Dimitar Stefanov · « **en:** 12 de Enero 2016, 17:40 »

Mis códigos del ejercicio CU01027D del curso CSS desde cero:

Código HTML:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="description" content="Portal web">
	<meta name="keywords" content="programar,cursos">
	<link rel="stylesheet" type="text/css" href="estilos32.css">
	<title>Ejemplo de border - aprenderaprogramar.com</title>
</head>
<body>
	<div id="page">
		<div id="header">
		</div>
		<div id="wrapper">
			<div id="menu">
			</div>
			<div id="body">
				<div id="a">div1</div>
				<br/><br/>
				<div id="b">div2</div>
			</div>
		</div>
		<div id="footer">
		</div>
	</div>
</body>
</html>

1er Código CSS: "estilos32.css"

Código: [Seleccionar]

#a {
	border-top-style: dotted;
	border-top-width: 10px;
	border-top-color: green;
	border-right-style: dashed;
	border-right-width: 20px;
	border-right-color: blue;
	border-bottom-style: double;
	border-bottom-width: 10px;
	border-bottom-color: #A52A2A;
	border-left-style: groove;
	border-left-width: 30px;
	border-left-color: #2F4F4F;
	height: 40px;
}
#b {
	border-top-style: inset;
	border-top-width: 30px;
	border-top-color: #B22222;
	border-right-style: solid;
	border-right-width: 22px;
	border-right-color: #DAA520;
	border-bottom-style: double;
	border-bottom-width: 25px;
	border-bottom-color: #4B0082;
	border-left-style: dotted;
	border-left-width: 17px;
	border-left-color: #808000;
	height: 40px;
}

PD: Como pueden ver, he utilizado la propiedad "height" tanto para la primera división como para la segunda para que se puedan ver mejor los resultados.

2o Código CSS:

Código: [Seleccionar]

#a {
	border-top: dotted 10px green;
	border-right: dashed 20px blue;
	border-bottom: double 10px #A52A2A;
	border-left: groove 30px #2F4F4F;
	height: 40px;
}
#b {
	border-top: inset 30px #B22222;
	border-right: solid 22px #DAA520;
	border-bottom: double 25px #4B0082;
	border-left: dotted 17px #808000;
	height: 40px;
}

PD: Aquí también he introducido la propiedad "height" con la misma finalidad como en el 1er código CSS.

Ogramar · « **Respuesta #1 en:** 14 de Enero 2016, 16:14 »

Buenas dimiste

El ejercicio 1 lo veo bien, incluso puedes aumentar el height a 400px y así se ven mejor los bordes

El ejercicio 2 también lo veo bien aunque podrías aplicar la notación shortand más compacta como se hace en https://www.aprenderaprogramar.com/foros/index.php?topic=3154.0

Salu2

Dimitar Stefanov · « **Respuesta #2 en:** 15 de Enero 2016, 18:14 »

Gracias Ogramar,

tomo nota sobre la notación abreviada (shortand).

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: