1. Home
  2. スタイルシート CSS
  3. イメージ
  4. 画像の境界線を指定する

画像の境界線を指定する


border: ***;

ブラウザ
IE
Fx
Sf
Cr
O
特性
border

border は、境界線の太さ、色、スタイルを一括で指定するプロパティです。

このプロパティをimg要素に対して設定すると、画像に境界線を付けることができます。



img {
border: 2px #ff0000 solid;
}


プロパティ名 説明
border 太さ、色、スタイル 境界線(太さ、色、スタイル)を指定

境界線の指定方法については、「境界線の設定をひとまとめに行う」をご覧ください。

【参考】

画像にリンクを設定すると、一般的なブラウザでは自動的に境界線が表示されます。この境界線を消したい場合は、img要素border: none を指定します。

border-radius

境界線の角に丸みをつける。

Opera で border-radius を適用したときの表示角丸のためのプロパティー。Opera 10.50 では接頭辞は必要ない。Mozilla と Webkit でも既に実装済み。


使用例


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>

<style type="text/css">

img.example { border: 5px #ff0000 solid; }

a img { border: none; }
img.radiu { border-radius: 10px; }
</style>

</head>
<body>

<p><img src="siodome-01.jpg" alt="[写真]" class="example"></p>

<p><a href="index.html"><img src="siodome-01.jpg" alt="[写真]"></a></p>
<p><img src="siodome-01.jpg" alt="[写真]" class="radiu"></p>
</body>
</html>

表示例

[写真]

[写真]

[写真]


イメージ

ページの先頭へ


inserted by FC2 system