Label built into border

How to use it

Put a border around some content, but make one side of the border thicker. Put a label on the thicker part of the border.

When to use it

Often grouping elements is possible just by putting them near each other. But if you want to make it very obvious that some content is grouped, and you want to label that group, this method is quite neat, and means you don't need to try to include the title of the group in the content itself.

What to watch out for

If you put the label of the group on the bottom edge of the border like in the example below, the title will be below the content, so it might not act as a very good title. Feel free to try this technique with the thicker border/label at the top or the sides, but the effect might not be as good. My best guess for this is that we naturally expect the "heavier" part of an element to be at the bottom, because of gravity.

Examples

Example