Learning Code

Borders

With CSS3, there are some really useful additional properties to use when working with borders.

Custom Border Images

With border-image we can create a custom image that repeats to use as a border! First you will need to create a miniature version of your border in a graphics program such as Photoshop.

What's Happening

The border-image property divides your image into 9 pieces (the sides, the corners, and the middle). Then you set how you want each section to react.

Properties and Values

  • border-image-source: the location of the image
    • url('path_to_image.type')
  • border-image-slice: the size of the slices (1 to 4 values → top, right, bottom, and left sides)
    • initial
    • inherit
    • fill (displays the middle of the image)
    • %
    • numeric value (with or without unit)
  • border-image-width: the width of the border (1 to 4 values → top, right, bottom, and left sides)
    • auto
    • initial
    • inherit
    • % or px
    • number (multiplied by border-width value)
  • border-image-outset: how far the border image can continue past the border-box
  • border-image-repeat: how the border-image repeats to fill the space(round, stretched, or repeat)
  • border-image: the shorthand for the border-image properties (source slice width outset repeat)

In Action

Make sure that you set the border to have a color and a size:
.border1 {border: white solid 10px;
border-image: url('images/borderimage.png') 10 round;}
.border2 {border: white solid 8px;
border-image: url('images/borderimage.png') 5 3 stretch;}
.border3 {border: white solid 10px;
border-image: url('images/borderimage.png') 9% 3% 5% 7% repeat;}

Rounded Corners

With border-radius we can now have rounded corners! This property will work to make a border, image or background-color have rounded corners. Border-radius is actually short-hand. You can look up the individual properties if you would like!

Values

Border radius is a little tricky. You can have from 1 to 4 different values depending on if you want to set each corner individually or use 1 value for each corner.

1 value: sets all corners
2 values: top-left + bottom right corners, top-right + bottom-left corners
3 values: left, top-right + bottom left, bottom-right
4 values: top-left, top-right, bottom-left, bottom-right

In Action

1234
.rect1 {border-radius: 5px;}
.rect2 {border-radius: 5px 10px;}
.rect3 {border-radius: 5px 10px 15px;}
.rect4 {border-radius: 5px 10px 15px 20px;}


Depending on where you are using border-radius, you may need to include a border or background property for the border-radius to display correctly.

Box-sizing

Box-sizing determines whether or not the border and padding areas are included in the set height/width for an element. Including the padding/border in the height and width can sometimes minimize the necessity for mathematic calculations.

Values

content-box: height/width only impacts the content area (the default behavior)
border-box: height/width includes the border, padding, and the content area

In Action

main {box-sizing:border-box;}

Content-boxBorder-box

Can you use the Try-it Editor to try out these concepts?