• HTML
  • React
  • Knowledge Base
  • HTML
  • React
  • Knowledge Base
  • HTML Tutorial
  • HTML Styles – CSS
  • Link to an Email Address
  • HTML Introduction
  • HTML Editors
  • HTML Basic Examples
  • HTML Elements
  • HTML Attributes
  • HTML Headings
  • HTML Paragraphs
  • HTML Styles
  • HTML Text Formatting
  • HTML Quotation and Citation Elements
  • HTML Comments
  • HTML Colors
  • HTML RGB and RGBA Colors
  • HTML HEX Colors
  • HTML HSL and HSLA Colors
  • CSS Colors, Fonts and Sizes
  • CSS Padding
  • CSS Border
  • CSS Margin
  • Link to External CSS
  • HTML Style Tags
  • HTML Links
  • HTML Links – The target Attribute
  • Absolute URLs vs. Relative URLs
  • HTML Links – Use an Image as a Link
  • Button as a Link
  • Link Titles
  • Absolute URLs and Relative URLs
  • HTML Link Tags
  • HTML Links – Different Colors
  • Link Buttons
  • HTML Links – Create Bookmarks
  • The alt Attribute
  • HTML Images
  • Image Size – Width and Height
  • Image Width and Height, or Style
  • Images in Another Folder
  • HTML Images on Another Server/Website
  • HTML Animated Images
  • Image as a Link
  • Image Floating
  • Common Image Formats
  • HTML Image Tags
  • The render Method

CSS Border

6 views 0

Written by admin
April 15, 2023

CSS provides several properties to control the borders of elements on a web page. Borders can be used to provide visual separation between elements or to emphasize certain elements on a page. Here are some of the most commonly used CSS border properties:

border-style

The border-style property is used to set the style of a border. There are several options available, including:

  • none: No border is displayed.
  • solid: A solid, continuous border is displayed.
  • dotted: A dotted border is displayed.
  • dashed: A dashed border is displayed.
  • double: A double border is displayed.
  • groove: A 3D, grooved border is displayed.
  • ridge: A 3D, ridged border is displayed.
  • inset: A 3D, inset border is displayed.
  • outset: A 3D, outset border is displayed.

Here is an example of how to use border-style:

border-style: solid;

border-width

The border-width property is used to set the width of a border. You can use a specific value, such as 1px, or a keyword, such as thin, medium, or thick. Here is an example:

border-width: 2px;

border-color

The border-color property is used to set the color of a border. You can use a named color, a hexadecimal value, an RGB value, or an HSL value. Here is an example:

border-color: red;

border-radius

The border-radius property is used to create rounded corners on an element’s border. You can use a specific value, such as 5px, or a percentage value, such as 50%. Here is an example:

border-radius: 10px;

You can also use the border-top-left-radius, border-top-right-radius, border-bottom-left-radius, and border-bottom-right-radius properties to set the radius of individual corners.

These are just a few examples of the many border-related CSS properties available. By using these properties effectively, you can create visually appealing and well-designed web pages that make effective use of borders to separate and emphasize different elements.

Was this helpful?

Yes  No
Related Articles
  • The render Method
  • HTML Image Tags
  • Common Image Formats
  • Image Floating
  • Image as a Link
  • HTML Animated Images

Didn't find your answer? Contact Us

Leave A Comment Cancel reply

Previously
CSS Padding
Up Next
CSS Margin
Copyright 2022 k-window. All Rights Reserved