poner - lista de codigos css

¿Cómo crear un borde que cubra completamente las esquinas adyacentes en CSS?

Question

Tengo un div con un borde de 1px y estoy tratando de crear un borde de 3px en otro color para ese div. Estoy usando este código:

box {
border: 1px solid #ddd;
border-top: 3px solid #3F9BD0;
}

pero en las esquinas el borde no es bueno, ver imagen:

¿Cómo puedo hacer que este borde se vea bien, así:

violín: https://jsfiddle.net/15tory3z/

Answer 1

Bienvenidos a las fronteras css. La única forma de hacerlo correctamente es mediante :after o :before pseudoelements.

Fiddle

.box {
border: 1px solid #ddd;
position: relative;
}
.box:after {
position: absolute;
display: block;
content:'''';
/* Positioning */
top: 0;
width: 100%;
height: 3px;
left: 0;
right: 0;
/* Color */
background-color: #3F9BD0;
}

Answer 2

En lugar del border-top , intente usar el :after pseudo-elemento para recrear el efecto que desea.

.box {
width: 200px;
height: 100px;
border: 1px solid #ddd;
position: relative;
}
.box:after {
position: absolute;
content: "";
width: 100%;
height: 5px;
top: -5px;
background: dodgerblue;
padding: 1px;
left: -1px;
}

<div class="box"></div>

Opción 2:

Utilice linear-gradient() .

.box {
width: 200px;
height: 100px;
border: 1px solid #ddd;
background: -webkit-linear-gradient(top, dodgerblue 5%, #fff 5%);
background: -moz-linear-gradient(top, dodgerblue 5%, #fff 5%);
background: -o-linear-gradient(top, dodgerblue 5%, #fff 5%);
background: -ms-linear-gradient(top, dodgerblue 5%, #fff 5%);
background: linear-gradient(top, dodgerblue 5%, #fff 5%);
}

<div class="box"></div>

Answer 3

Esto también pone una línea en la parte superior:

.box1 {
border: 10px solid #ddd;
border-top: 0;
box-shadow: 0 -30px 0 #3F9BD0;
float: left;
width: 300px;
height: 300px;
}

<div class="box1"></div>

Answer 4

La pregunta es un poco vieja, pero pensé que haría una sugerencia que funcionó para mí en una situación similar.

Acabo de establecer border-width: 0; y eso quitó los extremos ingleteados y los hizo bonitos y cuadrados para un botón que tenía un borde inferior aplicado.

Answer 5

Podrías dibujar estos con sombras de inserción y relleno:

div {
padding:12px 5px 5px;
width: 40%;
height: 200px;
box-shadow: inset 0 10px #3F9BD0, inset 4px 0 gray, inset -4px 0 gray, inset 0 -4px gray
}

<div></div>

o simplemente una sombra superior de inicio

div {
width: 40%;
height: 200px;
border:2px solid gray;
border-top:none;
box-shadow: 0 -10px #3F9BD0;
margin-top:12px;
}

<div></div>

de lo contrario, se podría usar un gradiente de background e incluso 2 ejemplos animados: http://codepen.io/gc-nomade/pen/IGliC o http://codepen.io/gc-nomade/pen/pKwby

Answer 6

Prueba esto:

.box {
outline: 2px solid #ddd;
margin-top: -2px;
border-top: 10px solid #3F9BD0;
min-width:100px;
min-height:100px;
float:left;
}

<div class="box"></div>

Answer 7

Usa css :after pseudo-clase, :after

.box_big {
border: 10px solid #ddd;
position:relative;
z-index: 1;
}
.box_big:after{
height: 10px;
position: absolute;
top:-10px; left:-10px; right:-10px;
content: " ";
z-index: 2;
background: red;
}
.box {
border: 1px solid #ddd;
position:relative;
z-index: 1;
}
.box:after{
height: 3px;
position: absolute;
top:-3px; left:-1px; right:-1px;
content: " ";
z-index: 2;
background: red;
}

<div class="box_big">
big box
</div>
<hr />
<div class="box">
your box
</div>