CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSボーダープロパティ

CSS borderプロパティは、要素のborderプロパティを定義するために使用されます。これは、border-width、border-style、border-colorの省略形です。 border-top、border-rightなどのサイド固有のプロパティを使用して個々のサイドのスタイルを設定できます。

構文

CSSボーダープロパティの構文は次のとおりです-

Selector {
   border: /*value*/
}

例

次の例は、CSSボーダープロパティ-

を示しています。 
<!DOCTYPE html>
<html>
<head>
<style>
div {
   border-style: solid;
   margin: auto;
   padding: 5px;
   border-radius: 50%;
}
#main {
   height: 100px;
   width: 100px;
   border-left: 12px ridge goldenrod;
   border-right: 12px ridge goldenrod;
}
#main > div {
   line-height: 12px;
   height: 30px;
   width: 10px;
   padding: 27px 20px;
   border-top: 6px groove crimson;
   border-bottom: 6px ridge crimson;
}
</style>
</head>
<body>
<div id="main">
<div>i see you</div>
</div>
</body>
</html>

出力

これにより、次の出力が得られます-

CSSボーダープロパティ

例

<!DOCTYPE html>
<html>
<head>
<style>
p {
   width: 60%;
   margin: auto;
   padding: 20px 45px;
   border-top-width: 1.4em;
   border-top-style: solid;
   border-top-color: violet;
   border-radius: 85px 85px 0 0;
   color: black;
   font-size: 1.3em;
   background-image: url("https://www.tutorialspoint.com/images/css.png");
}
</style>
</head>
<body>
<p>CSS is used to control the style of a web document in a simple way. It handles the look and feel part of a web page.</p>
</body>
</html>

出力

これにより、次の出力が得られます-

CSSボーダープロパティ



  1. CSSでのアウトラインと境界線

    アウトラインはスペースをとらず、設定されている場合は境界線の周りに表示されます。これは要素を強調表示するために使用され、個々の側面に輪郭を付けるかどうかを指定することはできません。境界線と同様に、アウトラインはデフォルトでは表示されません。 Firefoxなどの一部のブラウザでは、フォーカスされた要素が細い輪郭で表示されます。 境界線はさらにカスタマイズできます。境界線の個々の側面をスタイリングし、それらのエッジを丸めます。境界線はスペースを占有し、ボックスのサイズに影響します。 構文 CSSボーダープロパティの構文は次のとおりです- Selector {    bor

  2. CSSで境界線画像を作成する方法

    CSSで境界線画像を作成するには、border-imageプロパティを使用します。以下は、CSSで境界線画像を作成するためのコードです- 例 <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .border1 {    border: 10px solid transparent;    padd