How to set css border line-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to set css border line

清浅

Dec 11, 2018 pm 04:55 PM

border-style

How to set the css border line: You can set the border line through the border-style attribute. The border-style attribute can be set to dotted, dotted, solid, 3D groove border, ridge border, 3Dinset border, etc.

[Recommended course: CSS tutorial]

Set css border line Method:

Border style border-style

This attribute is used to set the style of all borders of the element, or to set the border for each side individually. Style

Border styles have the following types:

none: No border defined, that is, no border
dotted: Border The style is dotted border
dashed: the border style is dashed
solid: the border style is solid line, rendered in most browsers is a solid line.
double: The border style is double line. The width of the double line is equal to the value of border-width.
groove: The border style is a 3D groove border, and its effect depends on the value of border-color.
#ridge: The border style is a ridge border, and its effect depends on the value of border-color.
inset: The border style is a 3D inset border, and its effect depends on the value of border-color.
outset: The border style is a 3D outset border, and its effect depends on the value of border-color.
#inherit: The border style should be inherited from the parent element.

Case:

Set the upper edge of the border to dots, the lower edge to dotted lines, and the left and right sides to solid lines

div{
			width:100px;
			height: 100px;
			border-style: dotted solid dashed solid;
			border-color: pink;
		}

The rendering is as follows:

How to set css border line

Set the border to 3D groove and ridge border

<style type="text/css">
		.box1{
			width:100px;
			height:30px;
			border:5px groove pink;
			margin-bottom: 5px;

		}
		.box2{
			width:100px;
			height:30px;
			border:5px ridge  pink;

		}
	</style>
</head>
<body>
	<div class="box1">3D 凹槽边框</div>
	<div class="box2">垄状边框</div>
</body>

Rendering

How to set css border line

Summary: The above is the entire content of this article. I hope it will be helpful to everyone in learning border styles.

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

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

Iterating a React Design with Styled ComponentsApr 21, 2025 am 11:29 AM

In a perfect world, our projects would have unlimited resources and time. Our teams would begin coding with well thought out and highly refined UX designs.

Oh, the Many Ways to Make Triangular Breadcrumb Ribbons!Apr 21, 2025 am 11:26 AM

Oh, the Many Ways to Make Triangular Breadcrumb Ribbons

SVG Properties in CSS GuideApr 21, 2025 am 11:21 AM

SVG has its own set of elements, attributes and properties to the extent that inline SVG code can get long and complex. By leveraging CSS and some of the forthcoming features of the SVG 2 specification, we can reduce that code for cleaner markup.

A Few Functional Uses for Intersection Observer to Know When an Element is in ViewApr 21, 2025 am 11:19 AM

You might not know this, but JavaScript has stealthily accumulated quite a number of observers in recent times, and Intersection Observer is a part of that

Revisting prefers-reduced-motionApr 21, 2025 am 11:18 AM

We may not need to throw out all CSS animations. Remember, it’s prefers-reduced-motion, not prefers-no-motion.

How to Get a Progressive Web App into the Google Play StoreApr 21, 2025 am 11:10 AM

PWA (Progressive Web Apps) have been with us for some time now. Yet, each time I try explaining it to clients, the same question pops up: "Will my users be

The Simplest Ways to Handle HTML IncludesApr 21, 2025 am 11:09 AM

It's extremely surprising to me that HTML has never had any way to include other HTML files within it. Nor does there seem to be anything on the horizon that