AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL
HTML Tutorial

Bordes CSS


Next Page >>
HTML images

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.

Este elemento verde tiene un borde rojo fino, solid
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).

Ejemplo

<!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.

Ejemplo
<!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>
Nota:  El ancho del borde se puede especificar utilizando cualquier valor de longitud, como px, em, rem, etc.

 

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.

Ejemplo
<!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>
Nota: La propiedad de CSS border-width o border-color no funciona si se usa sola. Utilice la propiedad border-style para establecer primero el estilo del borde.

 



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

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


1
Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


Send forgot password by mail or message ...
PHP MySQL simple login system...
Check for duplicate username live or ema...
How to create simple search engine using...
Diseño de sitio web CSS Layout...
Diseño de caja flexible CSS3...
Botones en CSS...
ID y Clase, Diferencias entre Class e Id...
Esquina redondeada CSS...
Tamaño de caja css box-sizing: border-b...
Alineación CSS...
Altura y Anchura CSS...
Bordes CSS...
Margen CSS...
Relleno CSS...
Modelo de caja CSS...
Tablas CSS...
Listas CSS...
Enlaces CSS...
Texto CSS...