Bordes CSS
CSS Tutorial » Bordes CSS<
Bordes CSS definicion.
Las propiedades del borde CSS le permiten definir el área del borde del cuadro de un elemento.
Los bordes aparecen directamente entre el margen y el relleno de un elemento. El borde puede ser un estilo predefinido como, línea continua, línea de puntos, línea doble, etc. o una imagen.
y un marjen amarillo de 25px.
La propiedad border-style puede tener los siguientes valores: none, hidden, solid, dashed, dotted, double, inset, outset, groove, and ridge.
Estilo de borde CSS
La propiedad de estilo de borde puede tener de uno a cuatro valores (para el borde superior, el borde derecho, el borde inferior y el borde izquierdo).
<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted; border-color:#00F}
p.dashed {border-style: dashed; border-color:#00F}
p.solid {border-style: solid; border-color:#00F}
p.double {border-style: double; border-color:#00F}
p.groove {border-style: groove; border-color:#00F}
p.ridge {border-style: ridge; border-color:#00F}
p.inset {border-style: inset; border-color:#00F}
p.outset {border-style: outset; border-color:#00F}
p.none {border-style: none; border-color:#00F}
p.hidden {border-style: hidden; border-color:#00F}
p.mix {border-style: dotted dashed solid double; border-color:#00F}
</style>
</head>
<body><h2>La propiedad de estilo de borde</h2>
<p>Esta propiedad especifica qué tipo de borde mostrar:</p><p class="dotted">Un borde punteado.Un borde mixto.</p>
<p class="dashed">Un borde punteado.</p>
<p class="solid">Un borde sólido.</p>
<p class="double">Un borde doble.</p>
<p class="groove">Un borde de ranura.</p>
<p class="ridge">Un borde de cresta.</p>
<p class="inset">Un borde insertado.</p>
<p class="outset">Una frontera inicial.</p>
<p class="none">Sin bordes.</p>
<p class="hidden">Un borde oculto.</p>
<p class="mix">Un borde mixto.</p></body>
</html>
Etiquetas: Bordes CSS, border-radius, border-color, border size, border generator, css border-bottom, css rounded border, css border shadow, border shorthand
Configuración del ancho del borde
La propiedad border-width especifica el ancho del área del borde. Es una propiedad abreviada para establecer el grosor de los cuatro lados del borde de un elemento al mismo tiempo.
<!DOCTYPE html>
<html lang = "es">
<head>
<meta charset = "utf-8">
<title> Propiedad de ancho de borde CSS </title>
<style>
p {
border-style: solid;
padding: 20px;
margin: 20px; border-color: #039
}
p.one {
border-width: 6px;
}
p.two {
border-width: 6px 12px;
}
p.three {
border-width: 6px 12px 16px;
}
p.four {
border-width: medium 12px thick 16px;
}
</style>
</head>
<body>
<p class = "one"> <strong> sintaxis de un valor: </strong>
el valor único establece el ancho de los cuatro lados del borde. </p>
<p class = "two"> <strong> sintaxis de dos valores: </strong>
el primer valor establece el ancho del borde superior e inferior, mientras que el
segundo valor establece el ancho del borde de los lados derecho e izquierdo. </ p>
<p class = "three"> <strong> sintaxis de tres valores:
</strong> el primer valor establece el ancho del borde superior,
el segundo valor establece el ancho del borde derecho e izquierdo y
el tercer valor establece el ancho del borde inferior. </p>
<p class = "four"> <strong> sintaxis de cuatro valores:
</strong> cada valor establece el ancho del borde individualmente
en el orden superior, derecho, inferior e izquierdo. </p>
</body>
</html>
Especificar el color del borde
La propiedad border-color especifica el color del área del borde. Esta es también una propiedad abreviada para establecer el color de los cuatro lados del borde de un elemento.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Propiedad de color de borde CSS</title>
<style>
p {
border-width: 15px;
padding: 20px;
margin: 20px;
}
p.one {
border-style: solid;
border-color: #ff0000;
}
p.two {
border-style: solid;
border-color: #ff0000 #00ff00;
}
p.three {
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff;
}
p.four {
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff #ff00ff;
}
</style>
</head>
<body>
<p class="one"><strong>one-value syntax:</strong>
el valor único establece el color de los cuatro lados del borde.</p>
<p class="two"><strong>two-value syntax:</strong>
el primer valor establece el color del borde superior e inferior,
mientras que el segundo valor establece el color del borde de los lados
derecho e izquierdo.</p>
<p class="three"><strong>three-value syntax:</strong>
el primer valor establece el color del borde superior, el segundo valor establece
el color del borde derecho e izquierdo, y el tercer valor establece el color
del borde inferior.</p>
<p class="four"><strong>four-value syntax:</strong>
cada valor establece el color del borde individualmente en el orden superior,
derecho, inferior e izquierdo.</p>
</body>
</html>
Etiquetas: Bordes CSS, border-radius, border-color, border size, border generator, css border-bottom, css rounded border, css border shadow, border shorthand
Bordes CSS - css.es
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.