0

HTML:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Nuevos Estilos</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
    <script src="main.js"></script>
</head>
<body>
    <header id="principal">
        <span id="titulo">Estilos CSS Web 2.0</span>
    </header>
</body>
</html>

CSS:

body{
    text-align: center;
}

#principal{
    display: block;
    width: 500px;
    margin: 50px auto;
    padding: 15px;
    text-align: center;

    border: 29px;
    -moz-border-image: url("diamonds.png") 29 stretch;
    -webkit-border-image: url("diamonds.png") 29 stretch;
    border-image: url("diamonds.png") 29 stretch; 
}

#titulo{
    font: bold 36px MiNuevaFuente, verdana, sans-serif;
    color: hsla(304, 37%, 31%, 0.5);
}

@font-face{
    font-family: 'MiNuevaFuente';
    src: url('font.ttf');
}

Quiero colocar el border-image pero cuando lo ejecuto no me aparece el border en el navegador.

1
  • ¿Podrías explicar donde se encuentran los archivos 'html', style.css y diamonds.png? Un problema puede ser que el path a los mismos.
    – Marcos
    el 6 nov. 2018 a las 14:34

2 respuestas 2

2

El problema lo tienes en la propiedad border, debes de colocarlo así:

border: 29px solid transparent;

Aparte del grosor del border debes de indicar su contextura solid para que tenga un cubrimiento total sobre todo el border y le indicias que sea transparente para que deje ver la imagen.

body{
    text-align: center;
}

#principal{
    display: block;
    width: 500px;
    margin: 50px auto;
    padding: 15px;
    text-align: center;
    border: 29px solid transparent;
    -moz-border-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT7CGAyIuH7UED1c3EyrfcsQ0W4pYWT_eCjOPa28tikB-kBkAjKcA") 29 round;
    -webkit-border-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT7CGAyIuH7UED1c3EyrfcsQ0W4pYWT_eCjOPa28tikB-kBkAjKcA") 29 round;
    -o-border-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT7CGAyIuH7UED1c3EyrfcsQ0W4pYWT_eCjOPa28tikB-kBkAjKcA") 29 round;
    border-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT7CGAyIuH7UED1c3EyrfcsQ0W4pYWT_eCjOPa28tikB-kBkAjKcA") 29 round; 
}

#titulo{
    font: bold 36px MiNuevaFuente, verdana, sans-serif;
    color: hsla(304, 37%, 31%, 0.5);
}

@font-face{
    font-family: 'MiNuevaFuente';
    src: url('font.ttf');
}
<header id="principal">
  <span id="titulo">Estilos CSS Web 2.0</span>
</header>

1

Elimina las comillas en las propiedades border:

#principal{
   display: block;
   width: 500px;
   margin: 50px auto;
   padding: 15px;
   text-align: center;

   border: 29px;
   -moz-border-image: url(diamonds.png) 29 stretch;
   -webkit-border-image: url(diamonds.png) 29 stretch;
   border-image: url(diamonds.png) 29 stretch; 
}
1
  • Las comillas son opcionales, sí, pero si llega a haber una ruta con algún caracter especial, tendrías que escaparlos manualmente si no se usan las comillas. el 6 nov. 2018 a las 15:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.