CSS Border (Border)

CSS Border (border) One, CSS border properties

CSS border properties allow you to specify the style and color of an element's border.

Example effect:

Two, border style

The Border Style property specifies what bounds to display.

The Border-style property is used to define the style of the border.

P.none{Border-style:None;}/*No Border*/p.dotted{Border-style:dotted;}/*dashed Border*/p.dashed{Border-style:Dashed;}/*dashed Border*/P.solid{Border-style:Solid;}/*Solid Line Border*/p.double{Border-style:Double;}/*Bilateral box*/P.groove{Border-style:Groove;}/*Groove Border*/P.ridge{Border-style:Ridge;}/*Ridge-Shaped border*/P.inset{Border-style:inset;}/*Embed Border*/P.outset{Border-style:outset;}/*Outer convex border*/P.hidden{Border-style:Hidden;}/*Hide Border*/

Effect:

Three, Border width

The Border-width property specifies the width of the border.

There are two ways to specify a width for a border: You can specify a length value, such as 2px or 0.1em (in pixels, pt, cm, EM, and so on), or use one of 3 keywords, which are thick, medium (default), and thin, respectively.

Note: CSS does not define the specific width of the 3 keywords, so one user may set thick, medium, and thin to equal 5px, 3px, and 2px respectively, while the other user is set to 3px, 2px, and 1px, respectively.

P.one {    border-style:solid;     border-width:5px;} P.two {    border-style:solid;     border-width:medium;}

Note: The "Border-width" property does not work if it is used alone. Use the Border-style property to set the border first.

Four, border color

The Border-color property is used to set the color of the border. The colors you can set:

• Name-Specifies the names of the colors, such as "Red"
• RGB-Specify RGB values, such as "RGB (255,0,0)"
• Hex-Specify 16 binary values, such as "#ff0000"

You can also set the border color to "transparent".

Note: Border-color alone is not working, you must first use Border-style to set the border style.

P.one {    border-style:solid;     border-color:red;} P.two {    border-style:solid;     border-color:#98bf21;}

Five, border-set each side individually

In CSS, you can specify a different border for different sides:

P {    border-top-style:dotted;     border-right-style:solid;     border-bottom-style:dotted;     border-left-style:solid;}

The above example can also set a single attribute:

Border-style:dotted solid;

The Border-style property can have 1-4 values:

• Border-style:dotted solid double dashed;
  • Top frame is dotted
  • The right border is solid
  • The bottom border is double
  • The left border is dashed.
• Border-style:dotted solid double;
  • Top frame is dotted
  • The left and right boxes are solid
  • The bottom border is double
• Border-style:dotted solid;
  • Top and bottom border is dotted
  • The right and left boxes are solid
• border-style:dotted;
  • Four-sided border is dotted

The above example uses the Border-style. However, it can also be used with Border-width and Border-color.

Six, border-shorthand properties

The above example uses a number of properties to set the border.

You can also set a border in one of the properties.

You can set it in the "border" property:

• Border-width
• Border-style (required)
• Border-color

border:5px solid red;

Vii. examples

(1) Use the shorthand attribute to set all four border properties in the same declaration:

{    border-style:solid;     border-top:thick double #ff0000;}

Effect:

(2) Set the style of the bottom border:

P{Border-style:Solid;}P.none{Border-bottom-style:None;}p.dotted{Border-bottom-style:dotted;}p.dashed{Border-bottom-style:Dashed;}P.solid{Border-bottom-style:Solid;}p.double{Border-bottom-style:Double;}P.groove{Border-bottom-style:Groove;}P.ridge{Border-bottom-style:Ridge;}P.inset{Border-bottom-style:inset;}P.outset{Border-bottom-style:outset;}

Effect:

(3) Set the width of the left border:

{    border-style:solid;     border-left-width:15px;}

Effect:

(4) Set the color of the four borders. You can set one to four colors:

P.one{Border-style:Solid;Border-color:#0000ff;}P.two{Border-style:Solid;Border-color:#ff0000 #0000ff;}P.three{Border-style:Solid;Border-color:#ff0000 #00ff00 #0000ff;}P.four{Border-style:Solid;Border-color:#ff0000 #00ff00 #0000ff rgb (250,0,255);}

Effect:

(5) Set the color of the right border:

{    border-style:solid;     border-right-color:#ff0000;}

Effect:

CSS Border (Border)