flex-gap-decorations-017.html (951B)
1 <!DOCTYPE html> 2 <title> 3 CSS Gap Decorations: row-rule-style inset should paint as ridge. 4 </title> 5 <link rel="help" href="https://drafts.csswg.org/css-gaps-1/#column-row-rule-style"> 6 <link rel="match" href="flex-gap-decorations-017-ref.html"> 7 <link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com"> 8 <style> 9 body { 10 margin: 0px; 11 } 12 13 #flexbox { 14 border: 2px solid rgb(96 139 168); 15 display: flex; 16 row-gap: 20px; 17 width: 50px; 18 height: 190px; 19 flex-wrap: wrap; 20 flex-direction: column; 21 row-rule-color: red; 22 row-rule-width: 20px; 23 row-rule-style: inset; 24 } 25 26 .items { 27 background-color: rgb(96 139 168 / 0.2); 28 flex-shrink: 1; 29 width: 50px; 30 height: 50px; 31 } 32 33 </style> 34 35 <div id="flexbox"> 36 <div class="items">One</div> 37 <div class="items">Two</div> 38 <div class="items">Three</div> 39 </div>