The short answer: raise the divider to 3–5px and give it a color, and the front and the back stay clearly separated even on long cards. Anki's default divider is a 1px pale grey line, so once a card runs past a few lines it disappears among the paragraphs. Thickening it alone turns it back into a clear "the answer starts here" signal.
Why the default divider stops working on long cards
The back of a card is usually the front's content ({{FrontSide}}) followed
by the answer underneath. For a one-line vocabulary card, a 1px line is plenty — your eye
takes in the whole screen at once.
The trouble starts with longer, prose-style cards. Put a two or three sentence question on the front and a few lines of explanation on the back, and the screen fills with stacked paragraphs. At that point a 1px grey line just reads as the gap between two paragraphs. You end up scrolling back to check where the question ended, and that re-reading costs a second or two per card — which adds up fast across a few hundred reviews.
The point is that a thick line cannot be mistaken for whitespace. Add color and your eye starts reading below the line automatically, right after the card flips.
How many pixels?
Match it to how long your cards run. In practice these values work well:
- 1–2px — vocabulary or term cards where both sides are a single line. Close to the default, and quiet.
- 3px — most cards, where one side runs two or three lines. The safest default.
- 4–6px — prose cards with a passage on the front or an explanation on the back. This is what actually separates multiple paragraphs.
- 7px and up — more of a color band than a line. It pulls your eye every time a card flips, so it's rarely worth it.
A thicker line also carries more weight, so pairing it with a line width of 60–80% tends to look better: bold, but not walling off the whole screen.
If there's no divider yet, add one first
Everything above assumed a divider already exists. In practice, when you're building
a template from scratch, it's the divider that's usually missing — not too thin, just
not there at all. The back of a card is typically the front's content
({{FrontSide}}) followed by the answer underneath, and while Anki's default
template puts a line between the two, a template you build yourself doesn't get one for
free. Without it, the question and the answer read as one block, so every time you flip a
card you have to hunt with your eyes for where the answer starts. One line changes that:
it gives you "below the line = the answer" as a rule, and the hunting
disappears. Across a review session with hundreds of cards, that small saving adds up to
real fatigue avoided.
Here's how to add one. Select Back above the preview, click the element that should sit right above the divider (usually the question part) to select it, then click [➕ Divider] under Add Elements — the line appears right after it. Click it with nothing selected and it lands at the very bottom instead. If the position isn't right, move it with [↑ Move up] / [↓ Move down], or remove it with [🗑 Delete].
A freshly added divider has its line width set to 100%, so it runs edge to edge. If that looks too long, try scaling it down to 60–80% — the line stays easy to spot while still doing its job as a boundary. Thickness and color, covered above, come next.
Setting it in ankieditor
- Select Back above the preview.
- Click the divider in the preview. If there isn't one, select the element right above the answer and click [➕ Divider] under Add Elements.
- In the left panel, raise Line thickness to 3–5px.
- Pick a color under Line color, just below it.
- If you like, bring Line width down to around 70%.
Everything updates in the preview as you go, so it helps to load field sample values roughly as long as your real cards before you start tuning.
The CSS this produces
ankieditor writes a rule like this into your template's styling section. If you'd rather paste it into Anki yourself, this code works as is.
#answer { border: none; height: 4px; background-color: #2e86de; width: 70%; }
border: none is the part you can't skip. The hr tag ships with
an inset 3D border in the browser's default styles, so if you set a color
without clearing that border, you get a washed-out double line with different shading top
and bottom. Clear the border first, then paint the element with height and
background-color, and the thickness and color come out exactly as specified.
Anki Desktop, AnkiDroid, and AnkiMobile all render cards in a webview, so this CSS behaves
the same everywhere.
Things to watch for
Night mode uses the same color. Anki's night mode does not invert colors
you set yourself. Pick a very light grey while working on a light background and it will be
nearly invisible on a dark one. If you switch between the two, a mid-tone
(say blue #2e86de or grey #888888) is the safe choice.
A line louder than the content backfires. The divider is there to guide reading, not to be a highlight. If your card already uses an accent color, keep the divider a notch quieter than it.
It's per note type. Templates are stored per note type, so you'll need to apply this to each one you use. You can turn that around, though: give each note type a different divider color and you'll also know at a glance which kind of card you're on.
Frequently asked questions
Does Anki allow changing the divider's color and thickness?
Yes. Anki renders cards in a webview, so ordinary CSS applies to the hr tag
exactly as it would on a web page. There is no restriction on Anki's side.
I raised the thickness and the line vanished.
If you set border: none without a background color, the element becomes a
transparent empty block and nothing shows. Thickness and color always have to be set
together — in ankieditor, touching either one records both.
Can I put a divider on the front too?
You can. That said, the front is best kept to just the question, so spacing usually serves you better than a line there.
If your cards run too wide to read comfortably, How to Change Card Width in Anki pairs well with this.