Border-radius: create rounded corners with CSS! - CSS3 . Info - The Diigo Meta page

• 13 May 12
  

  Ronald Walewski

  css

• 08 May 12
  

  Stephan Miller

  css3 rounded corners borderradius

• 

  Rebecca Thorman

  css border-radius borderradius

• 

  marcel krawczyk

  webdesign css css3

• 15 Apr 12
  

  digging2020

  "-moz-border-radius: 15px;
  border-radius: 15px;"

  webdesign css3 rounded corners

• 09 Apr 12
  

  Sven W.

  css3 css webdesign roundedcorners

• 05 Apr 12
  

  Lucas Fernandez

  css css3

• 02 Apr 12
  

  Emily Lu

  CSS

• 23 Mar 12
  

  poisoned_eden
  • #example1 {
     border-radius: 15px;
     } 

     

    However, for the moment, you’ll also need to use the -moz- prefix to support Firefox (see the browser support section of this article for further details):

     

    #example1 {
     -moz-border-radius: 15px;
     border-radius: 15px;
     }
• 15 Mar 12
  

  robgilhuly

  css roundedcorners

• 01 Mar 12
  

  cary-anne olsen

  css webdesign roundedcorners tutorial

• 27 Feb 12
  

  Diego Muñoz Escalante

  css3 borderradius border

• 10 Feb 12
  

  Kristi Sullivan
• 07 Jan 12
  

  evolutionibus evolutionibus2

  DiseñoWeb CSS

• 23 Dec 11
  

  johnnyicon

  css css3 rounded roundedcorners borderradius

• 15 Dec 11
  

  cyril cosnier

  css3 corner

• 01 Dec 11
  

  Karim Bouchouchi

  Border CSS MyWork Web_Dev

• 29 Nov 11
  

  keenhenry1109

  css3 css webdesign design tutorial reference

• 23 Nov 11
  

  P M

  webdesign työ

• 07 Nov 11
  

  Creating rounded corners

  webdesign

• 28 Oct 11
  

  Marsha Vick

  webdesign css

• 19 Oct 11
  

  Olivia Munroe

  roundedCorners css3 css tutorials tips web Design box

• 18 Oct 11
  

  haltersweb

  FF, Safari, Chrome, IE9
  #example1 {-moz-border-radius: 15px; /* firefox */border-radius: 15px;}

  cross-browser rounded corner border radius

  • Border-radius: create rounded corners with CSS!
  • rounded corners for Firefox, Safari/Chrome, Opera and IE9
  • border-radius: 15px;
  • -moz- prefix to support Firefox
  • -moz-border-radius: 15px;
  • border-*-*-radius: [ <length> | <%> ] [ <length> | <%> ]
  • top-left
  • 10px 5px
  • 10% 5%
  • W3C Specification Mozilla Implementation      border-radius   -moz-border-radius   border-top-left-radius -moz-border-radius-topleft  border-top-right-radius -moz-border-radius-topright  border-bottom-right-radius -moz-border-radius-bottomright  border-bottom-left-radius -moz-border-radius-bottomleft

  8 more annotations...

• 14 Oct 11
  

  Ezequiel Lavaca

  border radius

• 

  Veronica Rivera

  border-radius: 15px;

  css border corners rounded webdesign gwt interface

• 12 Oct 11
  

  applethailand

  css css3 rounded webdesign

• 10 Oct 11
  

  Eric Chong

  webdesign webpage web css css3 rounded border corner webdev development

• 07 Oct 11
  

  Susan H

  Web tutorials tips design

• 28 Sep 11
  

  movingahead

  css3 tutorials delicious

• 

  Chris Christou

  css3 rounded_corners

• 27 Sep 11
  

  ken shoufer

  css webdesign roundedcorners corners rounded border-radius

• 23 Sep 11
  

  Eduardo Alcântara

  Tutorial para criar cantos arredondados em objetos de um website

  css tutorial programação design web corner round interface

• 08 Sep 11
  

  css border_radius

• 22 Aug 11
  

  Per Hoel

  rounded corners webdesign roundedcorners css

• 02 Aug 11
  

  David Sabaté

  css

• 

  davidsabate

  css

• 26 Jul 11
  

  malopez

  css3 roundedcorners

• 21 Jul 11
  

  Heather Rodriguez

  webdesign roundedcorners

• 20 Jul 11
  

  Jeannette *

  css round edges

• 12 Jul 11
  

  A Genesis

  240 unit08 webdesign css layout

• 11 Jul 11
  

  Peter van der Reijden

  • Here’s a basic example:

     

    This box should have a rounded corners for Firefox, Safari/Chrome, Opera and IE9.

     

    The code for this example is, in theory, quite simple:

     

    #example1 {
     border-radius: 15px;
     } 

     

    However, for the moment, you’ll also need to use the -moz- prefix to support Firefox (see the browser support section of this article for further details):

     

    #example1 {
     -moz-border-radius: 15px;
     border-radius: 15px;
     }
  • border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius

  • At present Opera (version 10.5 onward), Safari (version 5 onward) and Chrome (version 5 onward) all support the individual border-*-radius properties and the border-radius shorthand property as natively defined in the current W3C Specification (although there are still outstanding bugs on issues such as border style transitions, using percentages for lengths, etc.).

     

    Mozilla Firefox (version 1.0 onward) supports border-radius with the -moz- prefix, although there are some discrepancies between the Mozilla implementation and the current W3C specification (see below).

     

    Update:Recent Firefox nightly versions support border-radius without the -moz- prefix.

     

    Safari and Chrome (and other webkit based browsers) have supported border-radius with the -webkit- prefix since version 3 (no longer needed from version 5 onward), although again with some discrepancies from the current specification (see this article for further details of how older versions of Webkit handle border-radius).

     

    Even Microsoft have promised, and demonstrated in their recent preview release, support for border-radius from Internet Explorer 9 onward (without prefix).

  1 more annotation...

• 07 Jul 11
  

  Cristian Demetriad

  css css3 corners webdesign borderradius rounded border roundedcorners

• 02 Jul 11
  

  Adam Ng

  webdesign css roundedcorners

• 27 Jun 11
  

  webdev tutorials corners rounded css html

• 25 Jun 11
  

  Cian Brassinne

  css corners rounded webdesign

• 09 Jun 11
  

  craig sweigart

  css rounded corners

• 07 Jun 11
  

  lucionoivo

  css border radius

• 

  Dirk Stieglitz
• 01 Jun 11
  

  Raihan K
• 31 May 11
  

  kiirja paananen

  css corners webdesign roundedcorners border

• 26 May 11
  

  Martín Touriño Camprubí

  css3 rounded corners borderradius border roundedcorners

• 05 May 11
  

  Nicholas Burman

  css3

• 01 May 11
  

  Shaun Hainey

  Border-radius: create rounded corners with CSS! - CSS3 . Info

  web design css code

• 07 Apr 11
  

  Muthu Kumaran

  RoundCorner CSS Mozilla

• 02 Apr 11
  

  Sergio Momesso

  css3 webdesign border radius css

• 19 Mar 11
  

  fabricioffc
• 17 Mar 11
  

  Birger Eriksson

  css3 corners roundedcorners rounded

• 16 Mar 11
  

  roger coryell

  corners

• 15 Mar 11
  

  Patrick Baumann

  -moz-border-radius-topleft

  css css3 abgerundete ecken rounded corners

• 11 Mar 11
  

  Matthew Mattingly

  css

• 28 Feb 11
  

  Daniel Grundel
  • #Example_F {
     height: 70px;
     width: 70px;
     -moz-border-radius: 35px;
     border-radius: 35px;
    
• 26 Feb 11
  

  H. Tree

  " -moz-border-radius-topleft"

  webdesign DesignResources

• 15 Feb 11
  

  aaron chen

  css3

• 07 Feb 11
  

  anilam

  "border-top-left-radius -moz-border-radius-topleft
  border-top-right-radius -moz-border-radius-topright"

  css css3 rounded corners

• 05 Feb 11
  

  Kalle Eidhagen

  css3 rounder corners with css rounded corners

• 25 Jan 11
  

  Joshua Sean

  css css3 rounded

• 20 Jan 11
  

  pierrestephazz

  css css3 borderradius rounded corners border webdesign

• 31 Dec 10
  

  Mary Segers
• 27 Dec 10
  

  Jacques Bosch

  "The CSS3 border-radius property allows web developers to easily utilise rounder corners in their design elements, without the need for corner images or the use of multiple div tags, and is perhaps one of the most talked about aspects of CSS3."

  dev css html

• 20 Dec 10
  

  Kolapalli Sunil Raghu Vamsee
• 17 Dec 10
  

  張 旭

  css

• 07 Dec 10
  

  Luke Woodham

  css3 css corners webdesign borderradius rounded

• 01 Dec 10
  

  Paul Kaufmann

  css

• 29 Nov 10
  

  Ben Bennett

  forms

• 28 Nov 10
  

  Heidi Claunch

  -moz-border-radius: 15px;
  border-radius: 15px;

  css3 css-borders

• 24 Nov 10
  

  Caryn D

  graphics&design:ref code:css

• 11 Nov 10
  

  Pedro Carrillo

  css css3 webdesign roundedcorners corners rounded design web

• 10 Nov 10
  

  kamihacker

  css css3 border html rounded

• 09 Nov 10
  

  Abe Massry

  webdesign

• 20 Oct 10
  

  pagetribe .

  css rounded corner

• 11 Oct 10
  

  S Wiltshire

  css reference mozilla css3 roundedcorners border corners

• 

  Alfons Nonell-Canals

  html css

• 07 Oct 10
  

  Michael Samuelson

  css css3 webdesign roundedcorners reference web design

• 02 Oct 10
  

  css3 roundedcorners

• 

  Owen Anderson

  css3 css webdesign roundedcorners

• 16 Sep 10
  

  css corners rounded curved ref reference border

• 04 Sep 10
  

  Edgar Muñoz

  css css3 webdesign roundedcorners corners rounded design web

• 01 Sep 10
  

  Daniel Lopez

  html code programming

• 24 Aug 10
  

  sasmita senapati

  CSS

• 16 Aug 10
  

  Chuen-Hing Lee

  css css3 roundedcorners

• 14 Aug 10
  

  10base Tom

  The CSS3 border-radius property allows web developers to easily utilise rounder corners in their design elements, without the need for corner images or the use of multiple div tags, and is perhaps one of the most talked about aspects of CSS3.

  css html development

• 11 Aug 10
  

  Ricardo Nunez

  css3 css

• 

  Victor Bautista

  borderradius borders corner round rounded-corners roundedcorners

• 15 Jul 10
  

  lovesipeels

  l240

• 02 Jul 10
  

  Scott Bower

  css

• 13 Jun 10
  

  Ryan Donahue

  css css3 design web

• 05 Jun 10
  

  sbogutyn

  css3 rounded corners borderradius

• 04 Jun 10
  

  Turlough McAnespy

  corners webdesign

• 03 Jun 10
  

  Jennifer Stuart

  css3 border-radius corners

• 21 May 10
  

  digerateur

  css roundedcorners webdesign

Would you like to comment?

Join Diigo for a free account, or sign in if you are already a member.