Home >Web Front-end >CSS Tutorial >How to use css border-right-style property
How to use css border-right-style property
- silencementOriginal
- 2019-05-27 14:18:562858browse
border-right-style definition and usage
In css, the border-right-style attribute is used to set the style of the right border . If we want to set the style of the right border of the element individually, we can use this attribute.
border-right-style attribute syntax format
css syntax: border-right-style: none / hidden / dotted / dashed / solid / double / groove / ridge / inset / outset / inherit;
border-right-style attribute value description
none: Set borderless elements (default);
hidden : The same as the none attribute value (but when used in table elements, hidden is used to resolve border conflicts);
dotted: Set the border to dotted (most browsers do not support it and display it as a solid line);
dashed: Set the border to a dotted line (most browsers do not support it and display it as a solid line);
solid: Set the border to a solid line.
double: Set the border to a double line (the width is equal to the value of the border-width property);
groove: Set the border to a 3D groove (the effect depends on the value of the border-color property);
ridge: Set the border to a 3D ridge border (the effect depends on the value of the border-color attribute);
inset: Set the border to 3D inset (the effect depends on the value of the border-color attribute) );
outset: Set the border to 3D outset (the effect depends on the value of the border-color attribute);
inherit: Inherit the border style from the parent element.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css border-right-style右边框样式属性笔记</title>
<style type="text/css">
body{background: #ddd;font-size:20px;}
#a,#b,#c,#d{margin-top:10px;width:400px;}
#a{border-right-style:solid;}
#b{border-right-style:dashed;}
#c{border-right-style:double;}
</style>
</head>
<body>
<div id = "a">solid：右边框为实线。</div>
<div id = "b">dashed：右边框为虚线（大多数浏览器不支持，显示为实线）</div>
<div id = "c">double：右边框为双线（宽度等于border-width属性的值）</div>
</body>
</html>Run result
The above is the detailed content of How to use css border-right-style property. For more information, please follow other related articles on the PHP Chinese website!