Change div border width, style and color.

Simple code to create div element.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<style>
.box1{
 width:200px;
 height:100px;
 font-size: 12px;
 color: black;
 background:#D7E5F0;
 border:.1em solid red;
}
</style>
<body>
<div id="div1" class="box1">
the div element is very often used together with CSS, to layout a web page.
</div>


border :width style color;
or separated like:
border-width : width;
border-style : style;
border-color : color;


Change div border width.
border-width : width: could be one of the following values: thin, medium, thick, [length].
[length] can be any specified value such as 1px, 2px or more.
example:
thin
 
medium
 
thick
 
3px;
  
see how To specify border-width for each border.


Change div border style.
border-style : style: could be one of the following values: solid, dotted, dotted-narrow, dotted-wide, dashed, dashed-narrow, dashed-wide, inset, bevel, groove, ridge and outset.
example:
solid
  
dotted
  
dotted-narrow
  
dotted-wide
  



dashed
  
dashed-narrow
  
dashed-wide
  
inset
  



bevel
  
groove
  
ridge
  
outset
  



double
  





see how To specify border-style for each border.


Change div border color.
border-color : color;
color can be set as the name of the color like red, green, white,..etc.
color can be set as a hexadecimal code like #D7E5F0, #D7E5F0,..etc.
color can be set as rgb code like rgb(23,432,112).
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<style>
.box1{
 width: 200px;
 height: 100px;
 font-size: 12px;
 color: black;
 background: #FFFF99;

 border-width: 2px;
 border-style: solid;
 border-color: #000080;
}
</style>
<body>
<div id="div1" class="box1">
the div element is very often used together with CSS, to layout a web page.
</div>

the div element is very often used together with CSS, to layout a web page.

see how To specify border-color for each border.

If this post was good and helpful for you, Please give it Like.
.
    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment

Subscribe to: Post Comments ( Atom )