How come outline is visible on one but not the other?

user_17974392 0
Viewed 39

Not visible here: curtains open by themselves.

Not visible: outline: 1px solid red; https://jsfiddle.net/3sz47bq0/1/

How would I have the 1px line be visible here?

.ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  margin: auto;
  overflow: hidden;
  outline: 1px solid red;
}

enter image description here

But that 1px line is visible here: https://jsfiddle.net/pdzcj6og/1/

The curtains don’t auto open here.

enter image description here

css
1 Answers

Because in your .curtain class you have the property overflow: hidden;. If you remove it then the outline will show.

.curtain {
  flex: 1 0 0;
  margin: auto;
  max-width: 640px;
  border: 21px solid;
  border-radius: 3.2px;
  border-color: #000 #101010 #000 #101010;
  position: relative;
  overflow: hidden;  
}
user_148071110
Related