Round corners AND <b> tag

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fluid transparent round corners - no images required</title>
<style type="text/css">


* {
    margin:0;
    padding:0
}
p {
    margin:0 0
}



body {
    padding:10px;
    background:url(images/bgstripe.gif)
}
.test {
    float:left;
    margin:10px;
    display:inline;
    clear:both;
}
.content {
    background:#ccc;
    border-left:1px solid blue;
    border-right:1px solid blue;
    padding:1px 5px;
    overflow:hidden;
}
.test b {display:block}
.top *, .bottom * {
    padding:1px 0 0;
    background:#ccc;
    border-right:1px solid blue;
    border-left:1px solid blue;
    font-size:0;
}
.px0 {
    margin: 0 5px;
    background:blue;
}
.px1 {
    margin: 0 3px;
    border-width:2px;
}
.px2 {margin:0 2px;}
.px3 {
    margin: 0 1px;
    padding:2px 0 0;
}
.px4 {
    margin: 0 1px;
    padding:2px 0 0;
}
.fl, .fr {
    float:left;
    width:60px;
    height:40px;
    border:1px solid #000;
    margin:2px;
    display:inline;
    background:red;
    text-align:center;
}
.fr {float:right}
.test2 {width:50%}
.clear {clear:both}


</style>


<!--[if lte IE 7]>
<style type="text/css">
.content{display:inline;zoom:1.0}
</style>
<![endif]-->

</head>
<body>


<div class="test">


    <div class="top"><b class="px0"></b><b class="px1"></b> <b class="px2"></b> <b class="px3"></b> </div>



    <div class="content">
        <p>This item has no width and is stretched
            by the content it contains.</p>
    </div>
    <div class="bottom"><b class="px3"></b> <b class="px2"></b> <b class="px1"></b> <b class="px0"></b></div>
</div>



</body>
</html>

The output of the code above is at http://dot.kr/x-test/layout/002_1.php.
I like to modify the contents like the belelow.

[b]before modifying[/b]
<p>This item has no width and is stretched
      by the content it contains.</p>

[b]after modifying[/b]
<p>This item has no width and is stretched
      by the content [COLOR="#FF0000"]<b>[/COLOR]it[COLOR="#FF0000"]</b>[/COLOR] contains.</p>

The result of the code above is at http://dot.kr/x-test/layout/002_2.php.
You can see the line breaks before and after it.

I like to make the text “it” bold by using <b> tag like the code above without any line breaks before and after the text “it”.

As an aside, if you want rounded corners these days, just use border-radius. Hacks like you’ve used are unnecessary now.

I deleted my post because I thought for a moment that I must be missing something; but in retrospect, I don’t think I was.

The <b> tag has already been given {display:block} so it will generate line breaks.

You will need to use a different tag to target the text. For example…


[noparse]<span>it</span>[/noparse]

If you really want to use the [noparse]<b>[/noparse] tag to target “it”, then you could re-code the [noparse]<b>[/noparse] so it addresses only the top and bottom lines:


.top b,
.bottom b {display:block} 

That would leave .content untouched.

(I’ve never seen this hack before… interesting :scratch: )

Here is how with a b. http://www.websitecodetutorials.com/code/css/rounded-corners-pure-css.php. But as mentioned just use border radius.

I made the page at http://dot.kr/x-test/layOut/002_3.php with the code you suggested.
Since the text “Rounded Corners” is dynamic, the box should be flexible by the length of the text “Rounded Corners”, but it seem not to be flexible at http://dot.kr/x-test/layOut/002_3.php .

Would you give me one of the most simple example code or any url which has the example?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta name="viewport" content="width=device-width">
    <title>template</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1158403-round-corners-AND-lt-b-gt-tag
Thread: round corners AND <b> tag
2013.07.24 19:55
dotJoon
-->
    <style type="text/css">

p {
    display:inline-block;
    border:2px solid #00f;
    border-radius:4px;
    padding:12px;
}

    </style>
</head>
<body>

<p>Rounded Corners</p>

</body>
</html>

How simple is it!!! Thank you. ronpat.
When did it happen?

It is one of the early CSS3 properties and has been adopted by all modern browsers. Vendor prefixes are no longer recommended.

Yes, it is very easy AND very powerful. Rounded corners is only one of several things it can do.

Here are a couple of resources you an look at that describe border-radius:

http://css3gen.com/border-radius/

Just wanted to clarify something.

The ‘error’ happened in your selection (or planning), specifically : .test b{…}

this rule will apply to ALL DESCENDANT B TAGS of .test, perhaps you wanted to have a B tag that was a child of the DIV be a block, or maybe this specific B tag inside the P was an exception which you wanted to be inline.

Depending on the code of your entire page, you could use a class for the B tag you want to be block/inline.


.test .noBlock b { display:inline; }
<p class="noBlock">This item has no width and is stretched
      by the content <b>it</b> contains.</p>

hope that helps