Bordes en CSS3
https://engineerdesistemas.blogspot.com/2017/03/bordes-en-css3.html
La inclusión de bordes en un documento HTML5 es muy sencillo y se apoya con los estilos de CSS3, los estilos pueden insertarse en el mismo documento o pueden ser externos en un archivo con extensión .css. En este ejemplo veremos la forma de insertar una caja con bordes redondeados en la parte superior.
Y el resultado en pantalla es:
El resultado en pantalla es este:
El código es como sigue:
<!DOCTYPE html>
<html>
<head>
<title>Bordes con CSS3</title>
<style type="text/css">
div {
border: 2px solid black;
padding: 10px 40px;
background: green;
width: 400px;
border-radius: 20px 20px 0px 0px;
}
</style>
</head>
<body>
<div>Texto de ejemplo dentro de un cuadro redondeado.<br>Texto de ejemplo dentro de un cuadro redondeado.<br>Texto de ejemplo dentro de un cuadro redondeado.<br>Texto de ejemplo dentro de un cuadro redondeado.<br>Texto de ejemplo dentro de un cuadro redondeado.
</body>
</html>
Y el resultado en pantalla es:
Es posible también realizar bordes con sombreado, tan solo se añade otra línea de código como verán en este ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Bordes con sombreado CSS3</title>
<style type="text/css">
div {
width: 400px;
height: 400px;
background-color: green;
box-shadow: 10px 10px 10px blue;
}
</style>
</head>
<body>
<div>Texto de ejemplo dentro de un cuadro redondeado.<br>Texto de ejemplo dentro de un cuadro redondeado.<br>Texto de ejemplo dentro de un cuadro redondeado.<br>Texto de ejemplo dentro de un cuadro redondeado.<br>Texto de ejemplo dentro de un cuadro redondeado.
</div>
</div>
</body>
</html>
El resultado en pantalla es este:
