Concepts / Working with Borders

Working with Borders

An empty border reserves space around the edges of a component and draws nothing, so the background color shows through that space.

  • Programming

Why Cramped Layouts Need Breathing Room

Imagine a label whose text runs right up against the edge of its box, or a panel whose inner controls sit flush against its outer boundary. The layout works, but it looks cramped. Swing lets you fix this by attaching a border to a component. A border is a decorative or spacing region that surrounds the component's edges. Depending on the kind of border you choose, that region might be invisible padding, a single colored outline, or a frame with different thicknesses on each side.

As you read, keep one question in mind: what does this border add to the component's area, and what does the learner see in that added area? The three border types covered here answer that question in three different ways. Following each one step by step makes their differences much easier to hold onto than memorizing their method names.

Predicting the Visible Area

Start with a bare component that has no border at all. Its visible region is just its own background, and its content reaches the outermost edge. Now attach a border, and ask two things. First, does the border occupy any width along each edge? Second, if it occupies space, is anything drawn into that space or is it left alone? Those two questions separate the three types. One type reserves space and draws nothing. Another draws a visible line of equal width on every side. The third draws a line too, but lets each side have its own width.

Label textstarts at the left edgeBorder zonereserved, nothing drawnBackgroundfills the whole labelLabel textinset from the edges
When an empty border is attached, which part of the label's original bounds is taken away from the content area, and how much smaller does the visible content become?

The before and after columns show the same label. In the second column, the border zone is carved out of the label's original bounds. Whatever the label was drawing now has to fit inside the smaller inner area, so the visible content is pushed inward and the content area shrinks by the width the border reserves on each side.

Nested Regions: Outer Bounds, Border Zone, and Content

Every bordered component can be read as three nested regions. The outer bounds are the full rectangle the component occupies. Inside that sits the border zone, the strip reserved along the edges. The innermost region is the content area, where the component's own text, controls, or painting actually lands. The border zone is always between the other two.

Outer boundsthe whole componentBorder zoneedge strip, reservedContent areatext or controlscontainssurrounds
How are the outer bounds, the reserved border zone, and the inner content area nested, and where does the background color appear?

What do you think happens?

A panel has a blue background and an empty border. Does the blue show through the border zone?

  • Yes, the background shows through the reserved space

  • No, the reserved space is always white

Reveal answer
Answer:

Yes, the background shows through the reserved space.

The empty border draws nothing in the space it reserves, so the component's background color is visible there.

The Empty Border: Space Without Drawing

Definition

An empty border reserves space around the edges of a component and draws nothing, so the background color shows through that space.

The key feature is that nothing is drawn in the reserved space. A reader who expects a visible outline will be surprised: the empty border is purely a spacing tool. Its usefulness comes from what it does to the layout around the component rather than from anything visible on its own.

The source names two common uses. On a JPanel that holds other components, an empty border puts space between those components and the panel's edge. On a JLabel, it adds breathing room between the text and the edge of the label, which otherwise would have none.

The Line Border: One Thickness on Every Side

A line border draws a line of one color and one thickness in pixels around all four edges of a component. Unlike the empty border, it does not simply reserve space; it fills that space with a visible line. Every side receives the same thickness, because a single integer governs all four edges. If you want a frame that looks identical on all sides, this is the natural choice.

java
Notes on the code
  • createLineBorder takes a color first and a single thickness in pixels second
  • The thickness of 2 applies to all four edges equally

The Matte Border: Four Widths and a Color

Think of the matte border as the line border generalized. Where the line border uses one thickness for all four sides, the matte border accepts four separate widths, one for each edge. This lets you build frames that are heavier on one side than another, or open up a side entirely by giving it a width of zero. The four widths are followed by one color, which applies to the drawn border.

BorderFactoryfactory class that buildsborderscreateMatteBordermethod name2top edge thickness0left edge thickness, zeromeans open2bottom edge thickness0right edge thickness, zeromeans openColor.REDcolor of the drawn border,last
Which parameter in a createMatteBorder call controls which edge of the border, and how does each one map to the visible result?
java
Notes on the code
  • Parameters are top, left, bottom, right, then color
  • Left and right are zero, so only the top and bottom edges receive a red line

Reading the Parameter Lists

Placing the three methods side by side shows how their parameter lists encode their behavior. The empty border takes four widths and no color, because it draws nothing. The line border takes a color and one thickness, because it draws a uniform line. The matte border takes four widths and a color, because it draws a line whose thickness can differ by edge. Once you know that, the parameter list tells you whether a call draws anything at all.

java
Notes on the code
  • The empty border takes four widths, top, left, bottom, right
  • There is no color parameter because nothing is drawn

Choosing a Border for a Layout Need

Choosing the right type comes down to one question: does the area need to be blank, drawn with one uniform line, or drawn with a line whose sides differ? The comparison below lays out how each type answers it.

Border typeReserves spaceDraws in that spacePer-edge widthsParameter list
Empty borderYesNothing; background shows throughYes, four widthsFour widths, no color
Line borderYesA uniform line in one colorNo, one thicknessA color and one thickness
Matte borderYesA line whose thickness can differ by edgeYes, four widthsFour widths and a color

Three border types compared by what they reserve and what they draw

Mistakes Beginners Make with Borders

  • Common mistake

    Expecting an empty border to show a visible outline

    Why it fails

    The empty border reserves space and draws nothing, so the background shows through instead.

    Do this instead

    Use a line or matte border when you need a visible edge.

  • Common mistake

    Passing a color to createEmptyBorder

    Why it fails

    The empty border takes four widths and no color, because it draws nothing.

    Do this instead

    Pass only the four widths, such as createEmptyBorder(10, 10, 10, 10).

  • Common mistake

    Expecting createLineBorder to take four widths

    Why it fails

    The line border uses one thickness for every side, so per-edge widths belong to the matte border.

    Do this instead

    Switch to createMatteBorder when the sides need different thicknesses.

Practice: Pick the Border

EASY

A JLabel's text touches the edge of its box. You want space between the text and the edge, and nothing visible should be drawn. Which border type fits, and what four widths would you pass? Then consider a panel that needs a red line on its top and bottom only. Which type fits that, and what does its color parameter control?

Hints
  • Ask first whether the added area should be blank, a uniform line, or a line with edge-specific thicknesses.
  • Only the matte border takes both per-edge widths and a color; a zero width opens that side.

Key Takeaways

  • An empty border reserves space around a component's edges and draws nothing, so the background color shows through that space.
  • A line border draws one color at one thickness on all four edges, using a color and a single thickness as its parameters.
  • A matte border takes four separate widths for the top, left, bottom, and right edges, followed by a color for the drawn border.
  • To choose a border, ask whether the added area should be blank, a uniform line, or a line with edge-specific thicknesses.