[Hỏi đáp] làm sao để tiền tố có màu xung quanh zậy

có ai chỉ e cách tạo tiền tố có màu xung quanh như zậy đi

trong bài này Màu nền tiền tố
ở bước 2 sửa lại thành thế này
ACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet

Code:

.prefix{border:1px solid #008287;color:#FFF;border-radius:2px;display:inline-block;height:18px;line-height:18px;padding:0 4px} /* Mặc định cho các tiền tố chưa đặt style riêng */
.prefix.code{border:1px solid #16499a} /* Màu riêng cho tiền tố code */
.prefix.tool{border:1px solid #60a917} /* Màu riêng cho tiền tố Tool */
.prefix.thong-bao{border:1px solid #fa6800} /* Màu riêng cho tiền tố Thông báo */
.prefix.zzbaivong{border:1px solid #4390df} /* Màu riêng cho tiền tố zzbaivong */

Lưu ý:
+ Ngoài dòng css đầu tiên - mặc định, bạn có thể thêm màu tùy ý theo số tiền tố thường gặp trong diễn đàn của bạn.
+ Khi đặt css, bạn đặt như sau .prefix.TÊN-TIỀN-TỐ.
Tên tiền tố đặt theo nguyên tắc: Viết thường, Không dấu, Ký tự đặc biệt thì thay bằng gạch ngang. Ví dụ:

• [Thông báo] => .prefix.thong-bao
  
• [CODE] => .prefix.code

nó có giống hình trên hok anhoang , tại e thấy có màu nó tô hết nguyên cái chữ lun , e muốn nó như hình

CSS:

Code:

.prefix{border:1px solid #000;color:#000;border-radius:2px;display:inline-block;height:18px;line-height:18px;padding:0 4px} /* Mặc định cho các tiền tố chưa đặt style riêng */
.prefix.code{color:#16499a;border:1px solid #16499a} /* Màu riêng cho tiền tố code */
.prefix.tool{color: #60a917;border:1px solid #60a917} /* Màu riêng cho tiền tố Tool */
.prefix.thong-bao{color: #fa6800;border:1px solid #fa6800} /* Màu riêng cho tiền tố Thông báo */
.prefix.zzbaivong{color: #4390df;border:1px solid #4390df} /* Màu riêng cho tiền tố zzbaivong */