Lesson 30-CSS3 Borders and Outlines

CSS3 Borders and Outlines

border-radius

The border-radius property is used to set the radius of the corners of an element’s border. With this property, you can make the corners of an element appear rounded or elliptical instead of the traditional right angles. Its syntax format is as follows:

.element {
    border-radius: [horizontal-radius vertical-radius] | [radius];
}

.element {
    border-radius: [horizontal-radius vertical-radius] | [radius];
}

• horizontal-radius and vertical-radius specify the corner radius in the horizontal and vertical directions respectively. You can use units such as pixels, percentages, em, etc., or use the keyword inherit.
• When only one value is provided, it will be applied to both horizontal and vertical directions, that is, the corner radius of the four corners is the same.
• To set the radius for each corner individually, you can use a more verbose syntax:

element {
    border-radius: [top-left-radius top-right-radius bottom-right-radius bottom-left-radius];
}

.rounded-box {
    border: 2px solid #ccc;
    border-radius: 10px; /* 10 pixel radius for all four corners */
}

.circle {
    border-radius: 50%; /* Create a circular element */
}

element {
    border-radius: [top-left-radius top-right-radius bottom-right-radius bottom-left-radius];
}

.rounded-box {
    border: 2px solid #ccc;
    border-radius: 10px; /* 10 pixel radius for all four corners */
}

.circle {
    border-radius: 50%; /* Create a circular element */
}

border-image

The border-image property allows you to use an image as the border style of an element, instead of a traditional solid color or gradient border. It can specify an image, cut it into nine regions, and apply it to the nine parts of the border (four corners, four sides, and the middle region) separately. Its basic syntax is as follows:

.element {
    border-image: source slice width outset repeat | inherit;
}

.element {
    border-image: source slice width outset repeat | inherit;
}

• source: specifies the URL or CSS gradient function used as the border image.
• slice: sets the dividing line (i.e. slice) of the image border, which can be a pixel value or a percentage. The default value is 1, which means using the actual border of the image.
• width: defines the border width. If omitted, the border width will be inherited from the border-width property.
• outset: optional, defines the offset of the border image relative to the border box. Positive values ​​will cause the image to expand outside the border, while negative values ​​will shrink inward.
• repeat: specifies how the image is repeated in the border. The optional values ​​are: stretch, repeat, round, and space.

.custom-border {
    border-style: solid;
    border-width: 30px;
    border-image: url("border-image.png") 30 round;
}

.custom-border {
    border-style: solid;
    border-width: 30px;
    border-image: url("border-image.png") 30 round;
}

outline-offset

The outline-offset property is used to set the distance between the element outline and the border edge. Unlike border, outline does not occupy space and does not affect the layout of the element. It is mainly used for visual cues or focus indication. Its syntax format is as follows:

.element {
    outline-offset: [offset-distance] | inherit;
}

.element {
    outline-offset: [offset-distance] | inherit;
}

offset-distance is a length value that can be a positive number (place the outline outside the border), a negative number (place the outline inside the border), or 0 (the outline is close to the border).

.outlined-element {
    outline: 2px solid red;
    outline-offset: 5px; /* outline 5 pixels away from border */
}

.outlined-element {
    outline: 2px solid red;
    outline-offset: 5px; /* outline 5 pixels away from border */
}

box-shadow

The box-shadow property adds one or more shadow effects to an element. It can be used to create a sense of depth, a floating effect, or other visual enhancements. Its syntax format is as follows:

.element {
    box-shadow: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#;
}

.element {
    box-shadow: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#;
}

• inset (optional): specifies the inner shadow. If not specified, the default is the outer shadow.
• <offset-x> and <offset-y>: specify the horizontal and vertical offsets of the shadow relative to the element border, respectively, which can be negative values.
• <blur-radius> (optional): specifies the blur radius of the shadow. The larger the value, the blurrier the shadow.
• <spread-radius> (optional): specifies the spread distance of the shadow. Positive values ​​will make the shadow larger, while negative values ​​will make it smaller.
• <color>: the color of the shadow.

.shadowed-box {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Outer shadow, offset 2 pixels downward, blur radius 4 pixels, color is semi-transparent black */
}

.inner-shadow {
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); /* Inner shadow, blur radius 10 pixels, color is semi-transparent black */
}

.shadowed-box {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Outer shadow, offset 2 pixels downward, blur radius 4 pixels, color is semi-transparent black */
}

.inner-shadow {
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); /* Inner shadow, blur radius 10 pixels, color is semi-transparent black */
}