¿Alguna forma de declarar un tamaño / borde parcial a un cuadro?

¿Alguna forma de declarar un tamaño / borde parcial a un cuadro en css3? Por ejemplo, una caja con 350px que solo muestra un borde inferior en sus primeros 60px. Creo que eso podría ser muy útil.

Ejemplos:

enter image description hereenter image description here

Realmente no. Pero es muy fácil lograr el efecto de una manera que se degrada graciosamente y no requiere un marcado superfluo:

div { width:350px; height:100px; background:lightgray; position:relative; } div:after { content:''; width:60px; height:4px; background:gray; position:absolute; bottom:-4px; } 

Manifestación

Lo sé, esto ya está resuelto y se pidieron píxeles. Sin embargo, solo quería compartir algo …

Los elementos de texto parcialmente subrayados se pueden lograr fácilmente al usar la display:table o display:inline-block

(Simplemente no uso display:inline-block porque, ya sabes, el incómodo 4px -gap).

Elementos textuales

 h1 { border-bottom: 1px solid #f00; display: table; } 
 

Foo is not equal to bar

Aquí hay otra solución que depende del gradiente lineal donde puedes crear fácilmente todo tipo de línea que desees. También puede tener varias líneas (en cada lado, por ejemplo) mediante el uso de varios antecedentes:

 .box1 { width: 200px; padding: 20px; margin: 10px auto; text-align: center; background: linear-gradient(to right, transparent 20%, #000 20%, #000 40%, transparent 40%) 0 100% / 100% 3px no-repeat, #ccc } .box2 { width: 200px; padding: 20px; margin: 10px auto; text-align: center; background: linear-gradient(to right, transparent 20%, red 20%, red 80%, transparent 80%) 0 100% / 100% 2px no-repeat, #ccc } .box3{ width: 200px; padding: 20px; margin: 10px auto; text-align: center; background: linear-gradient(to right, transparent 20%, red 20%, red 80%, transparent 80%) 0 100% / 100% 2px no-repeat, linear-gradient(to right, transparent 30%, blue 30%, blue 70%, transparent 70%) 0 0 / 100% 2px no-repeat, linear-gradient(to bottom, transparent 30%, brown 30%, brown 70%, transparent 70%) 0 0 / 3px 100% no-repeat, linear-gradient(to bottom, transparent 20%, orange 20%, orange 70%, transparent 70%) 100% 0 / 3px 100% no-repeat #ccc } 
 
Box
Box
Box

Utilicé una grilla para construir dibujar algunas de las fronteras.

Mira aquí .

Código:

 < !DOCTYPE html>    Responsive partial borders    
Top
Mid
Bottom

CSS no admite bordes parciales. Necesitarías usar un elemento adyacente para simular esto.