Html 没有背景图像的圆桌角？

Rounding table corners without background image?

提问by Aasim Azam

Is it possible to round table corners (inline) without using a background image?

是否可以在不使用背景图像的情况下圆桌角（内联）？

回答by Loktar

Live Demo

现场演示

table{
    background: red;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
}

sighand inline...

叹息和内联...

<table style="background: red;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;">

Not really sure what you mean by converting the cell to a div though.

虽然不太确定将单元格转换为 div 是什么意思。

回答by Virendra

This example will create rounded borders on all corners of 5 px

此示例将在 5 px 的所有角上创建圆形边框

#example{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

If you want different rounded borders on different corners, or specific rounded corners modify the below code

如果你想在不同的角落有不同的圆角边框，或者特定的圆角修改下面的代码

#example1{
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 15px;
border-top-left-radius: 5px;
border-top-right-radius: 10px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 15px;
}

Check out http://border-radius.com/

查看http://border-radius.com/

回答by Mindy

Inline style still apply to email coding. So it is relevant.

内联样式仍然适用于电子邮件编码。所以它是相关的。

回答by Abhendra Singh

Yes you can do this. try the below code.

是的，你可以这样做。试试下面的代码。

#example1 {
-moz-border-radius: 5px;  
-khtml-border-radius: 5px;
-webkit-border-radius: 5px; 
}

For more details use thistutorial.

有关更多详细信息，请使用本教程。