How do I add a rounded corner box in anki templates?

Hello.
I making a new deck from scratch, a simple front card/ back card deck. Just using sentences in Japanese on the front, and their English translation at the back.
I have found a really beautiful deck online but sadly it’s only used for Chinese.



If I were to create something like that, how would I go about making it?
Again, my deck will be infinitely more simple.

To achieve this look, you’ll need to modify your front- and back templates (“Cards…”) as well as the CSS in the “Styling” tab.

Here’s a quick replica:

Just paste the markup into your card template editor.

4 Likes

Thank you so much!
Another person also helped me on reddit, the thread is named “Can anyone help me stylise a simple sentence deck to make it look like this?” by eru777 (I can’t post links)

Posting that template here as some people might find it useful: BackTemplate.html · GitHub

Would you please share the name of this chinese deck?

I’m sorry, I can’t post links here. You can find it if you google : beautify-chinese-study and loganconnor44 (the author)

1 Like

@ [kleinerpirat]
Can you help me with a minor detail on the deck template? The front of the card already displays the English. How do I remove it from it?
I mean, what section do I delete?
Here’s the code:


<div class="mainContainer">
    <div class="paperContainer">
        <!-- The top section (Japanese Text) -->
        <div class="cardSection">
            <div class="subSection jpTopic">
                <jp>{{JP-Topic}}</jp>
            </div>

            <div class="subSection jpSentence">
                <jp>{{JP-Sentence}}</jp>
            </div>
        </div>
        <!-- ####### -->

        <!-- The bottom section (English Translation) -->
        <div class="cardSection">
            <div class="subSection enTopic">
                {{EN-Topic}}
            </div>
            
            <div class="subSection enSentence">
                {{EN-Sentence}}
            </div>
        </div>
        <!-- ####### -->

        <!-- Meaning (or other) Tag -->
        <div class="tag">
            {{Tag}}
        </div>
        <!-- ####### -->
    </div>
</div>

EDIT: Nevermind, I just deleted the middle section and it’s fine now :slight_smile:

1 Like