When an Anki card's front and back look alike, or the content runs long, it can be hard to tell where the front ends and the back begins once you flip the card. The fix is to thicken the divider between them, or give it a color — either one draws a clear boundary. ankieditor lets you apply this to your Anki template in a single click.
When it's worth changing the divider
The back of a card is usually the front's content ({{FrontSide}}) followed
by the answer underneath, with a thin divider between the two. That thin divider is no
problem when the card's content is short. The trouble starts with long, prose-style
cards: if both the front and the back run to full sentences, a thin divider makes it hard
to tell where the front's content ends and the back's begins once you check the answer.
It can also be a problem when the front and back look similar — for card types where the
structure and content are close, with only a detail differing, a thin divider often isn't
enough. In cases like these, thickening the divider or changing its color makes the
boundary clear.
Recommended thickness for each situation
The best approach is simply to try different thicknesses and see what reads comfortably. Here are some starting points for common situations:
- 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.
How to add a divider
If a divider already exists, adjusting its thickness or color as above is all you need. But when you're building a template from scratch, the divider itself is sometimes missing entirely, or you may just want one somewhere specific. In cases like these, use ankieditor to add the divider yourself.
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. If there's anything you'd like different, feel free to edit the
numbers in the code directly.
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.
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.