Need to draw a rounded rectangle around selected headings

Hi All,

I need to make a rounded rectangle around headings, but I’m not familiar with Obsidian or CSS.
Please guide me on what I may do.

Thank you!

What I’m trying to do

you’ll need to do some homework for you to play around with css. do explore links below. i’ll give you a snippet to help u get started for that rounded rectangle headings

h1, h2, h3 {
    border: 1px solid white;
    border-radius: 5px;
    padding: 5px;
1 Like

Thank you!!!

That was indeed what was I needed. Also, thank you for putting me in the right direction.

Good day!

There was an unexpected side effect, but a pleasant one. Now all headers have a prominent Yellow rectangle around them.

It was an immense help, Thank you once again! :))

yes. since obsidian is an electron app, most of the app control is html-based. but if u want to have different look for app control than the notes themselves, i suggest u give more specificity to the css snippet. for example you can have two separate snippets

to affect only the settings control

.vertical-tab-content h1,
.vertical-tab-content h2,
.vertical-tab-content h3 {

to affect only the notes

.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3 {

here’s screenshot to show that my h2 element is being subject slightly different css snippet, where the settings has text-align attribute

1 Like

That too works like charm!!!

I’m really happy with the initial option; it worked perfectly. As I could tell a heading by a glance :slight_smile: (Including headings in settings).

I don’t know how to thank you enough!!!

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.