Problem with custom css for tags in live preview mode

[lone_avocado]

What I’m trying to do

Hi, I’m new to Obsidian and css entirely. Forgive me if I’m doing anything out of the general rules.
I’m trying to import custom css into Obsidian, but have had issues with a few showing up correctly in the Live Preview mode.

Here’s the code also in text.

.cm-s-obsidian span.cm-tag-Google,
.tag[href="#Google"] {
    background: #fff !important;
    color: #176bef !important;
    border: 2px solid #176bef;
    line-height: 2em;
    font-weight: 500;
    padding-top: 1.5px;
    padding-bottom: 3px;
}

.cm-s-obsidian span.cm-tag-Yahoo,
.tag[href="#Yahoo"] {
    background: #fff !important;
    color: #ff0033 !important;
    border: 2px solid #ff0033;
    line-height: 2em;
    font-weight: 500;
    padding-top: 1.5px;
    padding-bottom: 3px;
}

.cm-s-obsidian span.cm-tag-Twitter,
.tag[href="#Twitter"] {
    background: #81D5ED !important;
    color: white !important;
    line-height: 2em;
    font-weight: 500;
    padding-top: 1.5px;
    padding-bottom: 3px;
}

In this case, the border between “#” and “Google”(or “Yahoo”) overlap with each other.
The desired outcome would be a single border surrounding “#Google” or “Yahoo”, like the below.

Things I have tried

I’ve had some other issues but was able to solve them thanks to the below post.

Proper CSS for tags in Live Preview

I’m looking to give tags the same looks in the Live Preview as they have in Reading. Things I have tried .cm-s-obsidian span.cm-hashtag, .tag { color: #999999; background-color: #333333; border: none; padding: 1px 8px; text-align: center; text-decoration: none; display: inline-block; margin: 0px 0px; cursor: pointer; border-radius: 14px; } .cm-s-obsidian span.cm-tag-M, .tag[href="#M"] { background-color: darkred; color: lightgray; } .cm-s-obsid…

However I’ve been tinkering with the border overlapping issue for a while but to no avail.
Thanks in advance.

[lone_avocado]

I also have another css snippet for the hashtags that may be interfering (copied from the aforementioned forum post). Will paste just in case.

/* for hash (#) part of the tag in live preview */
/* use it for padding, and border */
.cm-s-obsidian span.cm-hashtag-begin {
	padding-left: 5px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

/* for the word (after the #) part of the tag in live preview */
/* use it for padding, and border */
.cm-s-obsidian span.cm-hashtag-end {
	padding-right: 5px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}
``

[ariehen]

Not sure what theme you are using (the default and Minimal themes have more rounded and pill shaped tags as the default shape), but something like this should work with some adjustments on your end.

/*------- reading mode tag -------*/
.tag[href="#Google"] {
    background: #fff !important;
    color: #176bef !important;
    border: 2px solid #176bef;
    line-height: 2em;
    font-weight: 500;
    padding-top: 1.5px;
    padding-bottom: 3px;
}

/*------- source+live preview tag -------*/
.cm-tag-Google {
  background: #fff;
  color: #176bef;
  border-top: 2px solid;
  border-bottom: 2px solid;
  line-height: 2em;
  font-weight: 500;
}

.cm-hashtag-begin.cm-tag-Google {
  border-left: 2px solid;
  padding-top: 1px;
  padding-right: 1px;
  padding-bottom: 3.5px;
}

.cm-hashtag-end.cm-tag-Google {
  border-right: 2px solid;
  padding-top: 1px;
  padding-bottom: 3.5px;
  }

[lone_avocado]

Hello ariehen. I use the theme “Atom”, and your method worked like a charm. Thank you good sir!