Home > Developer > JavaScript
[CSS] uses borders and backgrounds, and css border backgrounds.
1. Apply the border Style
First, start from controlling the border style attributes. A simple border has three key attributes: border-width, border-style, and border-color.
<! DOCTYPE html> P {border-width: 5px; border-style: solid; border-color: black ;;}</Style>
In the code, the p element is used to define a paragraph, and the style element is used to apply the border style for the paragraph, border styles are defined by setting the border-width, border-style, and border-color attributes.
1.1 set the Border Width
The value of the border-width attribute may be the regular CSS length value, which may be the percentage of the area width drawn by the border, or any of the three shortcut values. The following table describes possible Border width values. The default Border width is medium.
1.2 define border Style
The value of the border-style attribute can be any of the following table. The default value is none, that is, none.
<!DOCTYPE html>
Shows the appearance of these borders:
Apply the border style with one 1.3-bit edge
The four sides of an element can apply different border styles, which requires specific attributes, as shown in the following table:
You can use these elements to apply border styles to the edge of an element, or use them with more common attributes to subvert a specific border style.
<! DOCTYPE html> Border-left-width: 10px; border-left-style: dotted; border-top-width: 10px; border-top-style: dotted;} </Style>
The effects of these attribute settings are shown in:
1.4 Use border for short attributes
You do not need to set the style, width, and color separately.
<! DOCTYPE html> P {border: medium solid black; border-top: solid 10px ;;}</Style>
Note that no color value is specified for border-top. If you forget to set some values, the browser will use the previously defined values. Here, the color defined by the border short attribute is used.
1.5 create a rounded border
You can use the border radius feature to create a rounded border.
Specify two RADIUS values to define a rounded corner. Both the length value and the percentage value can be used. The first value specifies the Horizontal Curve radius, and the second value specifies the vertical curve radius. The percentage value is relative to the width and height of the element box. Shows how two RADIUS values determine a rounded corner.
It can be seen that the radius value is used to determine the elliptical shape of the member element box that is located inside the element box, and determines the border shape of the rounded corner.
<! DOCTYPE html> Border-top-left-radius: 20px 15px ;;} </Style>
If only one value is provided, both the horizontal radius and the vertical radius are the same.
PS: note that the rounded corner of the graph is exposed to text. You can add the padding attribute to the element box to make the element content and border have a certain distance.
You can use the boder-radius attribute to specify a value for the four corners of the border, or include four values in a value, as shown in the following code list:
<! DOCTYPE html> # First {border-radius: 20px/15px; ;## second {border-radius: 50% 20px 25% 5em/25% 15px 40px 55% ;;}</Style>
The Code defines two paragraphs, each of which has a border declaration of rounded corners. The first declaration only specifies two values, which will be applied to the four corners of the border. Note that the horizontal radius and vertical radius are separated by a slash. The second statement specifies eight values. The four values in the first group are the horizontal radius of the four corners, and the four values in the second group are the corresponding vertical radius. The two groups of values are also separated by/characters. Shows the effect of the two statements.
1.6 use the image as a border
Border is not limited to the style defined by the border-style attribute. You can use an image to create a real custom border for an element.
(To be continued)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
