Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

Rounded corner code inside the border

demand

Make a container with rounded corners only on the inside, while the four corners of the border or stroke remain right angles on the outside.

Easy to approach

Use two elements to achieve this effect:

// css
.meaningful {
	width: 200px;
	background: #389e0d;
	padding: 0.8em;
}
.meaningful > div {
	background: #595959;
	border-radius: 1em;
	padding: 1em;
}
// html
<div class="meaningful">
	<div>I have rounded corners inside the border</div>
</div>
Copy the code

Defect: Two elements are used. Here we use an element to achieve this effect:

Use outline and box-shadow

Outline syntax:

outline: width | style | color

The Outline shorthand property can be declared with one, two, or three values, and their order can be changed arbitrarily. Such as:

outline: solid; /* This only specifies the style value */ 
outline: dashed #eee; /* This specifies the color value and the style value */
outline: thick inset; /* This specifies the width value and the style value */ 
outline: 1px solid pulm; /* This will specify all three values */
Copy the code

Two points to note here:

  • When only one or two values are specified, the other values are resolved to their default values.outlineJust set it upstyleValue to work.
  • If the style is not defined, the outline of many elements will not be visible. This is because the style defaults tonone. One exception isinputElement, which is styled by default by the browser.

Box-shadow

The box-shadow attribute is used to add a shadow effect to the frame of an element. You can set multiple shadow effects on the same element and separate them with commas. The values you can set for this property include the X-axis offset, Y-axis offset, blur radius, spread radius, and color of the shadow.

/ * x offset | y offset | shadow color * /
box-shadow: 60px -16px teal;

/ * x offset | y offset | | fuzzy shadow radius shadow color * /
box-shadow: 10px 5px 5px black;

/ * x offset | y offset | | | fuzzy shadow radius shadow diffusion radius of the shadow color * /
box-shadow: 2px 2px 2px 1px rgba(0.0.0.0.2);

/ * insert (shadow) inward offset | y | x offset | shadow color * /
box-shadow: inset 5em 1em gold;

/* Any number of shadows separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

/* Global keyword */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;
Copy the code

Now we use box-shadow and Outline to do this:

In fact, box-shadow will follow the rounded corners of the element, while outline will not follow the rounded corners of the element. Therefore, if we overlay the two together, the box-shadow will fill in the gap between the stroke and the rounded corner of the container. That is:

// css
.meaningful {
	width: 200px;
	background: #595959;
	border-radius: 0.8em;
	padding: 1em;
	box-shadow: 0 0 0 0.6em #389e0d;
	outline: 0.6em solid #389e0d;
}
// html
<div class="meaningful"> my border is rounded </div>Copy the code

But in the new version of Chrome, it says:

This is because the stroke follows the rounded corner.

Therefore, to achieve the effect of rounded corners inside the border, it is safe to use method 1: use two elements.