តាមរយៈ border property យើងអាចច្នៃរចនាខ្សែវ័ណ្ឌជុំវិញ element ទាំងឡាយបានទៅតាមបំណងប្រាថ្នារបស់យើង។ property នេះចែកចេញជា property មួយចំនួនទៀតមានដូចជា border-style, border-width, border-color, border-sides, border-radius ជាដើម។
border-style ត្រូវប្រើប្រាស់សំរាប់ធ្វើការរចនាខ្សែវ័ណ្ឌរបស់ element អោយមានលក្ខណៈជាខ្សែជាប់ឬខ្សែដាច់ និងលក្ខណៈមួយចំនួនទៀត។
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Border Property</title>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>
The border-style Property
This property specifies what kind of border to display:
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border.
A ridge border.
An inset border.
An outset border.
No border.
A hidden border.
A mixed border.
</body>
</html>
The border-style Property
This property specifies what kind of border to display:
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border.
A ridge border.
An inset border.
An outset border.
No border.
A hidden border.
A mixed border.
យ៉ាងណាម៉ិញ បើសិនជាយើងចង់កំណត់ពីកំរាស់នៃខ្សែវ័ណ្ឌរប់ស element ទាំងឡាយ យើងត្រូវប្រើប្រាស់ property border-width ដូចខាងក្រោមនេះ៖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Border Property</title>
<style>
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: dotted;
border-width: 2px;
}
p.four {
border-style: dotted;
border-width: thick;
}
p.five {
border-style: double;
border-width: 15px;
}
p.six {
border-style: double;
border-width: thick;
}
</style>
</head>
<body>
The border-width Property
This property specifies the width of the four borders:
Some text.
Some text.
Some text.
Some text.
Some text.
Some text.
Note: The "border-width" property does not work if it is used alone.
Always specify the "border-style" property to set the borders first.
</body>
</html>
The border-width Property
This property specifies the width of the four borders:
Some text.
Some text.
Some text.
Some text.
Some text.
Some text.
Note: The "border-width" property does not work if it is used alone. Always specify the "border-style" property to set the borders first.
តែបើយើងចង់អោយខ្សែវ័ណ្ឌនៅតាមជ្រុងនិមួយៗរបស់ element មានកំរាស់ខុសគ្នាវិញ យើងត្រូវធ្វើដូចខាងក្រោមនេះ៖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Border Property</title>
<style>
p.one {
border-style: solid;
border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}
p.two {
border-style: solid;
border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}
p.three {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
}
</style>
</head>
<body>
The border-width Property
The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border):
Some text.
Some text.
Some text.
</body>
</html>
The border-width Property
The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border):
Some text.
Some text.
Some text.
border-color គឺជា property ប្រើសំរាប់កំណត់ពណ៌អោយខ្សែវ័ណ្ឌជុំវិញ element ។
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Border Property</title>
<style>
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: green;
}
p.three {
border-style: dotted;
border-color: blue;
}
</style>
</head>
<body>
The border-color Property
This property specifies the color of the four borders:
A solid red border
A solid green border
A dotted blue border
Note: The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.
</body>
</html>
The border-color Property
This property specifies the color of the four borders:
A solid red border
A solid green border
A dotted blue border
Note: The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.
នៅក្នុងការអនុវត្តជាក់ស្តែង គេនិយមប្រើប្រាស់ property border តែមួយដើម្បីសរុបការកំណត់ខ្សែវ័ណ្ឌរបស់ element ដូចខាងក្រោមនេះ៖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Border Property</title>
<style>
p {
border: 5px solid red;
}
</style>
</head>
<body>
The border Property
This property is a shorthand property for border-width, border-style, and border-color.
</body>
</html>
The border Property
This property is a shorthand property for border-width, border-style, and border-color.
