Home > Article > Web Front-end > How to achieve raised border in css3
How to achieve raised border in css3
- WBOYOriginal
- 2021-12-16 11:13:295210browse
In CSS, you can use the "border-style" attribute to achieve a raised border style. This attribute is used to set the style of the element border. When the value of the attribute is "outset", you can set the element border to be convex. Starting from , the syntax is "element {border-style:outset;}".
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
How to achieve raised borders in css3
In css, if you don’t want to achieve a raised border style, you need to use border-style Attributes.
The border-style attribute is used to set the style of all borders of an element, or to set the border style for each side individually.
When the attribute value is set to outset, define the 3D outset border, which is the raised style
The example is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width:100px;
height:100px;
background-color:pink;
border-style:outset;
border-width:5px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Output result:
(Learning video sharing: css video tutorial)
The above is the detailed content of How to achieve raised border in css3. For more information, please follow other related articles on the PHP Chinese website!