2013-03-14 3 views
33

Для данного div Я хотел бы показывать только границу слева, справа, сверху или снизу.Как установить границу css только с одной стороны?

В настоящее время у меня есть следующие, которые ставит границу со всех сторон:

#testdiv { 
    border: 1px solid; 
} 

Что мне нужно сделать для того, чтобы иметь границу только на левой стороне?

ответ

12
div{ 
    border-left:solid red 3px; 
    border-right:solid violet 4px; 
    border-top:solid blue 4px; 
    border-bottom:solid green 4px; 
    background:grey; 
    width:100px; height:50px 
} 

DEMO

9

Если вы хотите установить 4 стороны отдельно использовать:

border-width: top right bottom left; 
border-style: solid dotted inset double; 
border-color: #f00 #0f0 #00f #ff0; 
9

Вы можете указать границы separat Ely для всех границ, например:

#testdiv{ 
    border-left: 1px solid #000; 
    border-right: 2px solid #FF0; 
} 

Вы можете также указать внешний вид границы, и использовать отдельный стиль для верхней, правой, нижней и левой границы. например:

#testdiv{ 
    border: 1px #000; 
    border-style: none solid none solid; 
} 
1
#testDiv{ 
    /* set green border independently on each side */ 
    border-left: solid green 2px; 
    border-right: solid green 2px; 
    border-bottom: solid green 2px; 
    border-top: solid green 2px; 
}