htmlcss

Round Border around text

How can i apply the effect shown in the image using css

<div class="textstyle"><b>Sales Cash Invoice</b></div>

text

Solution 

  • .textstyle {
  /* Changing background color */
  background-color: gray;
  /* Making font bold */
  font-weight: bold;
  /* Making border radius */
  border-radius: 20px;
  /* Making auto-sizable width */
  width: auto;
  /* Making auto-sizable height */
  height: auto;
  /* Making space around letters */
  padding: 5px 30px 5px 30px;
  /* Changing font size */
  font-size: 18px;
}
    <div class="textstyle">Sales Cash Invoice</div>

    If you want to add font, just add a new line to css font-family: font_name;. I can't do that because i don't know what font is on the image.

    For a more precise colors, use Color Picker.