How to group screen elements using border ?

Why Use Borders:
- Borders enhance readability and appearance.
- They reinforce the existence of information groupings.
- Lines draw attention to related information and separate groups.
Line Thickness Tips:
- Limit line thickness variations to avoid clutter.
- Stick to three line weights or two different styles at most.
- Follow a hierarchy: thickest for major components, thinnest for minor separation.
Consistent Widths and Heights:
- Avoid distracting variations in line widths and heights.
- Create equal-width horizontal lines and equal-height vertical lines for better balance.
Space Padding Matters:
- Leave enough space between information and borders.
- Avoid overcrowding to maintain a visually pleasing design.
Alignment is Key:
- Align borders left, right, top, and bottom for adjacent groupings.
- Focus on left and top alignment; excessive white space isn’t visually appealing.
Use Lines Sparingly:
- Too many lines and borders create clutter and distraction.
- Use them sparingly for effective visual impact.
Web Page Considerations:
- Be cautious with horizontal lines in web design.
- Users might think they reached the bottom, potentially missing content.
- Reserve horizontal lines for emphasizing differences between adjacent areas.