CODEWITHSUNDEEP
csscss-tables
LanceBaynes
LanceBaynes

Reputation: 1463

Feather edge corners in a table how?

I used to use this kind of "documenting**" format, just an example: 

<html><head><link rel="stylesheet" href="style.css" type="text/css"><base target="_blank"></head><body> 
<table class="tablet"><tr><td><pre style="margin-bottom:0;"> 
find . -type f -size 0
</pre></td></tr></table> 
</body></html>

Picture: https://i.sstatic.net/1lTG5.png

** to e.g. document Linux/etc. howtos.

style.css

table.tablet
    {
        width: 98%;
        background: #ffffff;
        color: #000000;
        border-width: 1px;
        border-style: solid;
        border-color: #000000;
        padding-top: 5;
        padding-bottom: 5;
        padding-right: 10;
        padding-left: 10;
        font-size: 110%;
        font-family: "times";
        font-weight: normal;
        border-left: 5px solid #000000;
        margin-left:10px;
        word-wrap: break-word;
    }

body
    {
        background-color: #ffffff;
        color: #000000;
        padding-top: 0;
        padding-bottom: 0;
        padding-right: 0;
        padding-left: 0;
        font-size: 80%;
        font-family: "times";
        background-repeat:repeat;
        word-wrap: break-word;
    }

Q: I need to make "feather edges" from these "sharp corners". How?

Example for the "feather/rounded edges":

http://forum.ubuntu-fr.org/viewtopic.php?id=175880
Picture: https://i.sstatic.net/vRm3t.png

Upvotes: 0

Views: 1650

Answers (1)

Nick
Nick

Reputation: 8540

Use a div instead of a table, then use CSS3's border-radius property:

<!DOCTYPE html>
<html>
    <head>
        <style>
            body{
                background-color: #ffffff;
                color: #000000;
                padding:0;
                font-size: 80%;
                font-family: "Times";
                word-wrap: break-word;
            }
            div.tablet{
                width: 98%;
                height:20px;
                border: 1px solid #000000;
                padding: 5px 10px;
                font-size: 110%;
                border-left: 5px solid #000000;
                margin-left:10px;
                -webkit-border-radius: 6px;
                -moz-border-radius: 6px;
                border-radius: 6px;  
            }
        </style>
    </head>
    <body> 
        <div class="tablet">find . -type f -size 0</div> 
    </body>
</html>

Live demo here.

Note that border-radius is only supported in IE9, Safari 5.0, Firefox 4.0, and Chrome 4.0 or higher. Older browsers will see a square box instead of the rounded one. If that's a problem for you, you need to create your rounded corners with a background image. If the box will have a variable width, you'll need to create two rounded background images (one for the left and one for the right) then apply them with CSS using the sliding doors technique.

Upvotes: 1

Related Questions