FANDOM


Making rounded corners is possible and easy; you just need to learn how to use this property and you are set and ready to go! In this tutorial you will learn how to use the property: border-radius.

Border-radius helps make design and format of websites look sleek, smooth, and overall pretty cool.

All CornersEdit

HTMLEdit

Here is an example of how it can be typed out: 

<div style = "border-radius: 5px;">The Border-radius property with one value controls each corner. Easy shortcut to controlling each one. </div>

CSSEdit

{
     border-radius:5px;
}


Customized CornersEdit

Typing it this way will control all these corners to be rounded: the top-left corner, the top-right corner, the bottom-left corner, and finally the bottom-right corner. If you wanted to do it manually or individually, It could look like this:

HTMLEdit

<div style = "border-top-left-radius: 8px; border-top-right-radius:5px; border-bottom-left-radius:3px; border-bottom-right-radius:10px;></div>

CSSEdit

{
      border-top-left-radius: 8px;
      border-top-right-raidus: 5px;
      border-bottom-left-radius: 3px;
      border-bottom-right-radius:10px; 
}

ShorthandEdit

The Shorthand border-radius is used to make a shortcut for quick customizations:

HTMLEdit

<div style="border-radius:5px 3px 8px 4px;"></div>

CSSEdit

{
     border-radius: 5px 3px 8px 4px;
}

The pattern details are on the top-left, top-right, bottom-right, bottom-left.

ValuesEdit

Value Description
length Defines how round the corners are
% Defines how round the corners are by percentage

Browser SupportEdit

.CustomNoBold { font-weight:normal !important; }

Availability Alternatives

(alternatives only available in a property)

Name Browser
Yes -webkit-border-radius Google Chrome
GoogleChrome
Yes -moz-border-radius Mozilla Firefox
MozillaFirefox
Yes None Internet Explorer
InternetExplorer
Yes None Safari
Safari
Yes None Opera
Opera


ExamplesEdit

Here are examples and all types of boxes that can be made:

All CornersEdit

All Corners

Opposite Corners 1 (Top Right Corner, Bottom Left Corner)Edit

Opposite Corners

Opposite Corners 2 (Top Left Corner, Bottom Right Corner)Edit

Opposite Corners

Right CornersEdit

Right Corners

Left CornersEdit

Left Corners

Top CornersEdit

Top Corners

Bottom CornersEdit

Bottom Corners

Customized / Random CornersEdit

Customized / Random Corners

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.