CSSリファレンスマニュアル

CSS@ルール(RULES)

CSS属性全書

CSS border-top-width 属性 CSS3 border-top-right-radius 属性

CSS border-top-style属性の使用方法と例

border-top-style属性は、要素の上辺のスタイルを単独で設定します。しかし、多くの場合、以下のようにborder-styleまたはborder-topこのような省略形のCSS属性は、使いやすく、推奨されます。

以下の表は、この属性の使用方法とバージョンハイストリと、javascriptスクリプトでの使用構文を示しています。

デフォルト値：	none
適用：	すべての要素
継承：	ありません
アニメーション可能：	いいえ。参照してください。アニメーション属性。
バージョン：	CSS 1、2、3
JavaScript構文：	object.style.borderTopStyle="dotted"

border-top-styleの使用構文

この属性の構文は以下の通りです：

border-top-style:　none　|　hidden　|　dotted　|
　　　　　　　　　　　　　　　　　　　　dashed　|　solid　|　double　|
　　　　　　　　　　　　　　　　　　　　groove　|　ridge　|　inset　|　outset　|　inherit

以下の例では、borderの使用方法を示します。-top-style属性。

例

　　p　{
　　　border-top-style:　dashed;
　　　border-top-width:　3px;
　　}

测试看看‹/›

属性值

下表描述了此属性的值。

值	描述
none	没有边框显示。
hidden	与相同none，不同之处在于表格单元格具有折叠的边框并且两个单元格共享边框。该hidden值确保不绘制边框，因为它hidden优先于所有其他边框样式。
dotted	将边框显示为一系列点。
dashed	将边框显示为一系列短线段，即破折号。
solid	将边框显示为一条实线。
double	将边框显示为两条平行的实线，并在它们之间留有一定间隔。两行的总和以及它们之间的间距等于border-width的值。
groove	显示雕刻到画布中的边框。它给人以3D的印象，通常是通过用比边框颜色border-color更浅和更暗的两种颜色创建阴影来实现的。
ridge	显示与效果相反的边框groove。它还给人以3D的印象，边框看起来好像是从画布中出来的。
inset	显示使元素的框看起来像是嵌入到画布中的边框。它给人的印象是3D，这通常是通过创建一个阴影的两种颜色，比边框颜色border-color略亮和深。
outset	显示与效果相反的边框inset。它还给人以3Dの印象、边框使盒子看起来好像从画布中出来。
initial	この属性をデフォルト値に設定します。
inherit	指定された場合、関連する要素は親要素のborderを使用します。-top-styleの属性値。

ブラウザ互換性

border-top-style属性のブラウザの互換性について、以下のテーブルの数字はこの属性をサポートするブラウザの最低バージョン番号を示しています；すべての主要ブラウザがこの属性をサポートしています。

	Firefox 1+ Google Chrome1+ Internet Explorer 4+ Apple Safari 1+ Opera 4+

警告： Internet Explorer 7およびそれ以前のバージョンではvalue hiddenをサポートしていません。IE8サポートしていますが、<!DOCTYPE>。IE9及びそれ以降のバージョンがこのhidden値をサポートしています。

さらに詳しく

参照教程：CSS Border、CSS3 Border。

関連属性：border、border-style、border-top、border-top-color、
border-top-width。

CSS border-top-width 属性 CSS3 border-top-right-radius 属性