| <!DOCTYPE html> |
| <style> |
| .wrapper { |
| width: 140px; |
| margin: 50px; |
| font-family: sans-serif; |
| } |
| .out1 { |
| outline: 5px solid blue; |
| outline-offset: 5px; |
| } |
| .out2 { |
| outline: 5px solid green; |
| outline-offset: -5px; |
| } |
| </style> |
| <div class="wrapper"> |
| Lorem <span class="out1">ipsum dolor sit amet</span>, consectetur adipiscing elit. Quisque <span class="out1">fringilla libero vel</span> ligula viverra tincidunt. Quisque lacinia tincidunt tristique. |
| </div> |
| <div class="wrapper"> |
| Lorem <span class="out2">ipsum dolor sit amet</span>, consectetur adipiscing elit. Quisque <span class="out2">fringilla libero vel</span> ligula viverra tincidunt. Quisque lacinia tincidunt tristique. |
| </div> |
