CSS border

CSS Border

---

##CSS Border Property

The CSS border property allows you to specify the style and color of an element's border.

---

Border Style

The Border Style property specifies what kind of border to display.

The border-style attribute is used to define the style of the border

border-style value:

• none: Default is no border

• dotted: dotted: Define a dotted line frame

• dashed: Define a dotted line frame

• solid: Define a solid line Boundary

• double: Define two boundaries. The width of the two borders and the value of border-width are the same

• groove: Define the 3D groove boundary. The effect depends on the color value of the border

• ridge: Defines the 3D ridge border. The effect depends on the color value of the border

• inset: Defines a 3D embedded border. The effect depends on the color value of the border

• outset: Defines a 3D protruding border. The effect depends on the color value of the border

Example

      
  
无边框。
 
虚线边框。
 
虚线边框。
 
实线边框。
 
双边框。
 
 凹槽边框。
 
垄状边框。
 
嵌入边框。
 
外凸边框。
 
隐藏边框。
  

Run the program to try it

---

Border width

You can specify the width for the border via the border-width property.

There are two ways to specify the width of the border: you can specify a length value, such as 2px or 0.1em; or use one of 3 keywords, which are thin, medium (default value) and thick.

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

Example

      
  
一些文本。
 
一些文本。
 
一些文本。
  

Note: The "border-width" attribute has no effect if used alone. You must first set the border using the "border-style" attribute.

Run the program and try it

---

Border color

The border-color property is used to set the border s color. Colors that can be set:

name - Specify the name of the color, such as "red"

RGB - Specify the RGB value, such as "rgb(255,0,0)"

Hex - Specify a hexadecimal value, such as "#ff0000"

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

Note: border-color does not work when used alone. You must first use border-style to set the border style.

Example

      
  
山河拱手，为君一笑 。
 
如是颠簸生世亦无悔。
  

Run the program and try it

---

Borders - set each individually Sides

In CSS, you can specify different borders for different sides:

Example

      
  
两个不同的边界样式。
  

Run the program and try it

---

The border-style attribute can have 1-4 values:

border-style: dotted solid double dashed;

• The upper border is dotted

• The right border is solid

• The bottom border is double

• The left border is dashed

---

##border-style:dotted solid double;

• The top border is dotted

• The left and right borders are solid

• The bottom border is double

---

border-style:dotted solid;

• Top and bottom borders It is dotted

• The right and left borders are solid

---

• #border-style:dotted;

  
  

The borders on all four sides are dotted
The above example uses Border-style. However, it can also be used with border-width and border-color.

---

Border - shorthand attributeThe above example uses many attributes to set the border.

You can also set the border in a property.

You can set it in the "border" attribute:

border-width
border-style (required)
border-color

Example

      
  
段落中的一些文本。
  

Run the program and try it out

---

More examplesSet the colors of the four borders

      
  
One-colored border!
 
Two-colored border!
 
Three-colored border!
 
Four-colored border!
  

Run the program and try it

---

CSS Border Properties

Attribute	Description
border	Abbreviation attribute, used to combine the four sides Properties are set in a statement.
border-style	is used to set the style of all borders of an element, or set the border style for each side individually.
border-width	Shorthand attribute, used to set the width of all borders of an element, or set the width of each border individually.
border-color	Shorthand attribute, sets the color of the visible part of all borders of the element, or sets the color for each of the 4 sides.
border-bottom	Abbreviation attribute, used to set all attributes of the bottom border into one statement.
border-bottom-color	Set the color of the bottom border of the element.
border-bottom-style	Set the style of the bottom border of the element.
border-bottom-width	Set the width of the bottom border of the element.
border-left	Abbreviation property, used to set all properties of the left border into one statement.
border-left-color	Set the color of the left border of the element.
border-left-style	Set the style of the left border of the element.
border-left-width	Set the width of the left border of the element.
border-right	Abbreviation property, used to set all properties of the right border into one statement.
border-right-color	Set the color of the right border of the element.
border-right-style	Set the style of the right border of the element.
border-right-width	Set the width of the right border of the element.
border-top	Abbreviation attribute, used to set all attributes of the top border into one statement.
border-top-color	Set the color of the top border of the element.
border-top-style	Set the style of the top border of the element.
border-top-width	Set the width of the top border of the element.

##