CODEWITHSUNDEEP
css
FeelRightz
FeelRightz

Reputation: 2979

css outline left and right

Anyway to set css outline only show left and right ? Because I can't use border, I tried but it will make more bad outlook .

.test{
  margin:10px;
  padding:10px;
  width:100px;
  height:10px;
  outline:10px solid #000;
  }
<div class="test"></div>

Upvotes: 37

Views: 79264

Answers (2)

Francisco Leuro
Francisco Leuro

Reputation: 1

Easy: set element outline to 0px solid transparent, then set element:focus border-left, border-right, border-top and border-bottom accordingly

Upvotes: 0

jbutler483
jbutler483

Reputation: 24539

You could possibly achieve this using two box shadows:

div {
  margin: 10px;
  padding: 10px;
  width: 100px;
  height: 10px;
  box-shadow: -5px 0px 0px 0px black, 5px 0px 0px 0px black;
}
<div></div>

Upvotes: 87

Related Questions