CODEWITHSUNDEEP
csstitle
Nertum
Nertum

Reputation: 3

Title text wide as same as the block in CSS

I have this block:

enter image description here

For example: I add the text: Last News in the world.

I would like to have the width of the block as wide as the text, but the corners should still remain as a curve.

CSS:

.cat-box-title h2 {
    background: transparent url(.../images/testtitle.png) repeat-y;
    padding-left: 5px;
    color:#5E5E5E;
    float:left;
    margin-right:10px;
    font-size: 22px;
    font-family: BebasNeueRegular, arial, Georgia, serif;
}

HTML:

<div class="cat-box-title">
    title
</div>

Upvotes: 0

Views: 79

Answers (2)

J Prakash
J Prakash

Reputation: 1333

CSS: 

.cat-box-title {
             background-color: #4679bd; 
             color:#5E5E5E;
             float:left;
             border-radius:5px;
             margin-right:10px;
             font-size: 22px;
             padding: 5px;
             font-family: BebasNeueRegular,arial,Georgia, serif;
    }

Upvotes: 0

Sachin
Sachin

Reputation: 40970

Your solution will be more easy if you use the border-radius instead of background image.

.round-btn
{
  background:#4679bd;
  color: #FFF;
  border-radius:5px;
  padding : 10px;
  border:none;
}

of-course you need to check the browser compatibility whether your browser supports this property or not. If not then you need to use some hack.

JsFiddle Demo

and if you goes with background-image solution then you need to use two images; one for left side border-radius and another one for right side and use the background-color for rest of the button.

Upvotes: 1

Related Questions