Home > Article > Web Front-end > How to set irregular borders in css

How to set irregular borders in css

藏色散人Original: 2021-02-03 10:23:165554browse

How to set irregular borders in css: First create an HTML sample file; then set irregular borders through the "border-image: url(border.png) 30 stretch;" attribute.

The operating environment of this article: windows7 system, HTML5&&CSS3 version, Dell G3 computer.

How to set irregular borders in css?

In CSS, you can set irregular borders through the border-image attribute. The border-image property lets you style the border using an image.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style> 
#borderimg1 { 
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
    border-image: url(border.png) 30 round;
}
#borderimg2 { 
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 30 stretch; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30 stretch; /* Opera 11-12.1 */
    border-image: url(border.png) 30 stretch;
}
</style>
</head>
<body>
<p>border-image 属性用于指定一个元素的边框图像。</p>
<p id="borderimg1">在这里，图像平铺（重复），以填补该地区。</p>
<p id="borderimg2">在这里，图像被拉伸以填补该地区</p>
<p>这是原始图片:</p><img  src="/images/border.png" alt="How to set irregular borders in css" >
</body>
</html>

Rendering:

How to set irregular borders in css

Recommended: "css video tutorial"

border-image attribute

Syntax

border-image: source slice width outset repeat|initial|inherit;

Attribute value:

border-image-source is used to specify the location of the image to be used to draw the border

border-image-slice The image border is offset inward

border-image-width The width of the image border

border-image-outset is used to specify drawing border-image- outside the border The amount of area

border-image-repeat is used to set whether the image border should be repeated (repeat), stretched (stretch) or covered (round).

The above is the detailed content of How to set irregular borders in css. For more information, please follow other related articles on the PHP Chinese website!

html5 css css3 html border

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to select the first element with css selectorNext article：How to select the first element with css selector

See more

How to set irregular borders in css

Related articles