Propiedad border-image

borde-image, es una nueva propiedad de CCS3 que nos permite determinar la calidad y variedad de los borde ofreciendo la alternativa de usar imágenes personalizadas.

La propiedad borde-image utiliza una imagen como patrón. De acuerdo con los valores provistos, la imagen es cortada para obtener los trozos necesarios y luego estos trozos son colocados alrededor del objeto para general el borde.

Necesitamos declarar tres atributos: el nombre del archivo conteniendo la imagen a usar y su ubicación, el tamaño de los trozos que queremos obtener del patrón, y unas palabras claves para específicar cómo estos trozos de la imagen serán distribuidos alrededor del elemento.
Para distribuir esos trozos tenemos los siguientes métodos.
stretch estira un único trozo para cubrir el lado completamente.
repeat repite los trozos de imagen tantas veces como sea necesario para cubrir el lado del elemento. En este caso el tamaño de la imagen es preservado y la imagen será cortada si no hay espacio suficiente.
round calcula qué largo es el lado del elemento y luego estirará los trozos para asegurarse de que todos son mostrados completos.
Podemos utilizar la propiedad border-with para especificar un valor diferente para cada lado del elemento.
Para probar esta propiedad use una imagen en formato PNG.

Método round

@charset "utf-8";
/* CSS Document */
body {
text-align:center;
}
#inicio{
display:block;
width: 500px;
margin: 50px auto;
padding: 15px;
border: 30px solid;
border-image:url(../recursos/flores.png) 30 round;
}
#titulo{
font: bold 36px NuevaLetras, verdana, sans-serif;

}

Método repeat

@charset "utf-8";

/* CSS Document */

body {

text-align:center;

}

#inicio{

display:block;

width: 500px;

margin: 50px auto;

padding: 15px;

border: 30px solid;

border-image:url(../recursos/flores.png) 30 repeat;

}

#titulo{

font: bold 36px NuevaLetras, verdana, sans-serif;

}

Método stretch

@charset "utf-8";

/* CSS Document */

body {

text-align:center;

}

#inicio{

display:block;

width: 500px;

margin: 50px auto;

padding: 15px;

border: 30px solid;

border-image:url(../recursos/flores.png) 30 stretch;

}

#titulo{

font: bold 36px NuevaLetras, verdana, sans-serif;

}

Bordes en CSS3

Creamos un documento en HTML.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Estilo ccs3</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
<header id="inicio">
<span id="titulo">Estilos CSS</span>
</header>
</body>
</html>

Y ahora un documento en CSS.

@charset "utf-8";
/* CSS Document */
body {
text-align:center;
}
#inicio{
display:block;
width: 500px;
margin: 50px auto;
padding: 15px;
border: 1px solid #999999;
 background: #FFFFFF;
}
#titulo{
font: bold 36px verdana, sans-serif;
}

No hemos introducido nada nuevo, solo los estilos necesarios para formar una cabecera y crear una caja posicionada en el centro de la ventana.

Aplicamos la propiedad border-radius de CSS3.

@charset "utf-8";
/* CSS Document */
body {
text-align:center;
}
#inicio{
display:block;
width: 500px;
margin: 50px auto;
padding: 15px;
border: 1px solid #999999;
background: #FFFFFF;
border-radius: 20px;
}
#titulo{
font: bold 36px verdana, sans-serif;
}

Si las esquinas son del mismo valor, podemos declarar solo un valor para la propiedad.

Como sucede con margin y padding, podemos asignar valores distintos a cada esquina.

@charset "utf-8";
/* CSS Document */
body {
text-align:center;
}
#inicio{
display:block;
width: 500px;
margin: 50px auto;
padding: 15px;
border: 1px solid #999999;
background: #FFFFFF;
border-radius: 20px 10px 30px 50px;
}
#titulo{
font: bold 36px verdana, sans-serif;
}

Se puede trabajar con solo dos valores.

@charset "utf-8";

/* CSS Document */

body {

text-align:center;

}

#inicio{

display:block;

width: 500px;

margin: 50px auto;

padding: 15px;

border: 1px solid #999999;

background: #FFFFFF;

border-radius: 20px 10px;

}

#titulo{

font: bold 36px verdana, sans-serif;

}

Esto es todo sobre la propiedad border-radius.