Round Border around text

Question

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

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

Answer 1

.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.

Answer 2

.textstyle {
  display: inline-block;
  background: #CDCDCD;
  padding: 0.25em 1em;
  border-radius: 0.5em;
}

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

• inline-block makes the block only as wide as it needs to be, rather than spreading out to cover as much width as possible.
• background gives us a border effect without actually having a border
• padding pushes the border out so that the text isn't too close to the edges
• border-radius is the most important part; it gives us the rounded corners.

You can even specify each corner's roundness individually if you need to. https://developer.mozilla.org/en/docs/Web/CSS/border-radius